"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

快递/收货地址管理

前言


本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:


《创建 HelloWorld 项目》

《使用 “apifm-wxapi” 快速开发小程序》

《免费注册开通后台,获得专属域名》


本案例中,部分功能,需要用户登录后才能操作,也就是说需要 token 授权,请先了解:


《微信小程序登录获取openid及三方token》


功能介绍


商城类小程序开发必备模块,可让用户填写并管理自己的多个收货地址,方便在下单的时候直接选择某个地址作为订单的配送地址


启用模块


登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理


找到并启用下述模块:


收货地址管理


开后该模块后,你将可以在后台管理用户的收货地址:



apifm-wxapi 方法说明


获取所有的收货地址


1WXAPI.queryAddress(token)


添加收货地址


1WXAPI.addAddress(Object object)


你也可以结合小程序自带的读取收货地址接口,实现快速添加收货地址功能


更新收货地址


1WXAPI.updateAddress(Object object)


获取默认的地址


1WXAPI.defaultAddress(token)


读取地址详细


1WXAPI.addressDetail(token, id)


删除收货地址


1WXAPI.deleteAddress(token, id)


小程序开发


效果截图




小程序代码


收货地址管理


 1<view class="page">
 2  <view class="page__bd">
 3    <view wx:for="{{ addressList }}" wx:key="*this" class="weui-panel">
 4      <view class="weui-panel__hd"> {{ item.linkMan }} </view>
 5      <view class="weui-panel__bd">
 6        <view class="weui-media-box weui-media-box_text">
 7          <view class="weui-media-box__title weui-media-box__title_in-text">
 8            {{ item.mobile }}
 9          </view>
10          <view class="weui-media-box__desc">
11            {{ item.provinceStr }}{{ item.cityStr }}{{ item.areaStr }}{{ item.address }}
12          </view>
13          <view class="weui-media-box__info" style="margin-top: 0px;">
14            <view class="button-sp-area">
15              <button class="weui-btn mini-btn" type="default" size="mini" bindtap="addressDetail" data-id="{{ item.id }}">详情</button>
16              <button class="weui-btn mini-btn marginL" type="primary" size="mini" bindtap="updateAddress" data-id="{{ item.id }}">编辑</button>
17
18              <button class="weui-btn mini-btn marginL" type="warn" size="mini" bindtap="deleteAddress" data-id="{{ item.id }}">删除</button>
19            </view>
20          </view>
21        </view>
22      </view>
23    </view>
24  </view>
25</view>
26<button class="addAddress" type="default" bindtap="addAddress">添加新的收货地址</button>
27<button class="addAddress" type="primary" bindtap="defaultAddress">读取默认地址</button>


 1const WXAPI = require('apifm-wxapi')
 2
 3Page({
 4  data: {
 5    addressList: undefined
 6  },
 7  onLoad: function (options) {
 8
 9  },
10  onShow: function () {
11    const loginToken = wx.getStorageSync('loginToken')
12    if (!loginToken) {
13      wx.showToast({
14        title: '请先登录',
15        icon: 'none'
16      })
17      this.goRegist()
18      return
19    }
20    WXAPI.queryAddress(loginToken.token).then(res => {
21      console.log(res)
22      if(res.code == 0){
23        this.setData({
24          addressList: res.data
25        })
26      }
27    })
28  },
29  goRegist() {
30    wx.navigateTo({
31      url: '/pages/auth/index'
32    })
33  },
34  addAddress() {
35    wx.navigateTo({
36      url: '/pages/shipping-address/add'
37    })
38  },
39  addressDetail(e){
40    const id = e.currentTarget.dataset.id
41    const loginToken = wx.getStorageSync('loginToken')
42    WXAPI.addressDetail(loginToken.token, id).then(res => {
43      console.log(res)
44      if (res.code == 0) {
45        wx.showToast({
46          title: '查看控制台',
47          icon: 'success'
48        })
49      } else {
50        wx.showToast({
51          title: res.msg,
52          icon: 'none'
53        })
54      }
55    })
56  },
57  deleteAddress(e){
58    const id = e.currentTarget.dataset.id
59    const loginToken = wx.getStorageSync('loginToken')
60    WXAPI.deleteAddress(loginToken.token, id).then(res => {
61      if (res.code == 0) {
62        wx.showToast({
63          title: '删除成功',
64          icon: 'success'
65        })
66        this.onShow()
67      } else {
68        wx.showToast({
69          title: res.msg,
70          icon: 'none'
71        })
72      }
73    })
74  },
75  defaultAddress(){
76    const loginToken = wx.getStorageSync('loginToken')
77    WXAPI.defaultAddress(loginToken.token).then(res => {
78      console.log(res)
79      if (res.code == 0) {
80        wx.showToast({
81          title: '查看控制台',
82          icon: 'success'
83        })
84      } else {
85        wx.showToast({
86          title: res.msg,
87          icon: 'none'
88        })
89      }
90    })
91  },
92  updateAddress(e){
93    const id = e.currentTarget.dataset.id
94    wx.showToast({
95      title: '交给你啦~',
96      icon: 'none'
97    })
98  },
99})


添加收货地址


 1<view class="page">
 2  <view class="page__bd">
 3    <form bindsubmit="bindSave" report-submit="true">
 4      <view class="weui-cells__title">选择</view>
 5      <view class="weui-cells weui-cells_after-title">
 6        <view class="weui-cell weui-cell_select">
 7          <view class="weui-cell__hd weui-cell__hd_in-select-after">
 8            <view class="weui-label">省份</view>
 9          </view>
10          <view class="weui-cell__bd">
11            <picker bindchange="provinceChange" value="{{pIndex}}" range="{{provinces}}" range-key="name">
12              <view class="weui-select weui-select_in-select-after">{{provinces[pIndex].name}}</view>
13            </picker>
14          </view>
15        </view>
16        <view wx:if="{{cities}}" class="weui-cell weui-cell_select">
17          <view class="weui-cell__hd weui-cell__hd_in-select-after">
18            <view class="weui-label">城市</view>
19          </view>
20          <view class="weui-cell__bd">
21            <picker bindchange="cityChange" value="{{cIndex}}" range="{{cities}}" range-key="name">
22              <view class="weui-select weui-select_in-select-after">{{cities[cIndex].name}}</view>
23            </picker>
24          </view>
25        </view>
26        <view wx:if="{{areas}}" class="weui-cell weui-cell_select">
27          <view class="weui-cell__hd weui-cell__hd_in-select-after">
28            <view class="weui-label">区县</view>
29          </view>
30          <view class="weui-cell__bd">
31            <picker bindchange="areaChange" value="{{aIndex}}" range="{{areas}}" range-key="name">
32              <view class="weui-select weui-select_in-select-after">{{areas[aIndex].name}}</view>
33            </picker>
34          </view>
35        </view>
36        <view class="weui-cell ">
37          <view class="weui-cell__hd">
38            <view class="weui-label">联系人</view>
39          </view>
40          <view class="weui-cell__bd">
41            <input name="linkMan" class="weui-input" placeholder="请输入真实姓名" />
42          </view>
43        </view>
44        <view class="weui-cell ">
45          <view class="weui-cell__hd">
46            <view class="weui-label">详细地址</view>
47          </view>
48          <view class="weui-cell__bd">
49            <input name="address" class="weui-input" placeholder="请输入真实姓名" />
50          </view>
51        </view>
52        <view class="weui-cell ">
53          <view class="weui-cell__hd">
54            <view class="weui-label">手机号码</view>
55          </view>
56          <view class="weui-cell__bd">
57            <input name="mobile" class="weui-input" placeholder="请输入真实姓名" />
58          </view>
59        </view>
60        <view class="weui-cell ">
61          <view class="weui-cell__hd">
62            <view class="weui-label">邮编</view>
63          </view>
64          <view class="weui-cell__bd">
65            <input name="code" class="weui-input" placeholder="请输入真实姓名" />
66          </view>
67        </view>
68      </view>
69      <view class="weui-btn-area">
70        <button class="weui-btn" type="primary" formType="submit">{{ btnName }}</button>
71      </view>
72    </form>
73  </view>
74</view>


  1const WXAPI = require('apifm-wxapi')
  2
  3Page({
  4
  5  data: {
  6    provinces: undefined,// 省份数据数组
  7    pIndex: 0,//选择的省下标
  8    cities: undefined,// 城市数据数组
  9    cIndex: 0,//选择的市下标
 10    areas: undefined,// 区县数数组
 11    aIndex: 0,//选择的区下标
 12
 13    btnName: '添加收货地址',
 14  },
 15  onLoad: function (options) {
 16    WXAPI.province().then(res => {
 17      if (res.code == 0) {
 18        this.setData({
 19          provinces: res.data,
 20        })
 21      }
 22    })
 23  },
 24  provinceChange(e) {
 25    const index = e.detail.value
 26    this.setData({
 27      pIndex: index
 28    })
 29    const pid = this.data.provinces[index].id
 30    WXAPI.nextRegion(pid).then(res => {
 31      console.log(res)
 32      if (res.code == 0) {
 33        this.setData({
 34          cities: res.data
 35        })
 36      }
 37    })
 38  },
 39  cityChange(e) {
 40    const index = e.detail.value
 41    this.setData({
 42      cIndex: index
 43    })
 44    const pid = this.data.cities[index].id
 45    WXAPI.nextRegion(pid).then(res => {
 46      console.log(res)
 47      if (res.code == 0) {
 48        this.setData({
 49          areas: res.data
 50        })
 51      }
 52    })
 53  },
 54  areaChange(e) {
 55    const index = e.detail.value
 56    this.setData({
 57      aIndex: index
 58    })
 59    const pid = this.data.areas[index].id
 60    WXAPI.nextRegion(pid).then(res => {
 61      console.log(res)
 62      if (res.code == 0) {
 63        this.setData({
 64          streets: res.data
 65        })
 66      }
 67    })
 68  },
 69  goRegist() {
 70    wx.navigateTo({
 71      url: '/pages/auth/index'
 72    })
 73  },
 74  bindSave(e) {
 75    const loginToken = wx.getStorageSync('loginToken')
 76    if (!loginToken) {
 77      wx.showToast({
 78        title: '请先登录',
 79        icon: 'none'
 80      })
 81      this.goRegist()
 82      return
 83    }
 84    if (!this.data.cities) {
 85      wx.showToast({
 86        title: '请选择城市',
 87        icon: 'none'
 88      })
 89      return
 90    }
 91    WXAPI.addAddress({
 92      token: loginToken.token,
 93      provinceId: this.data.provinces[this.data.pIndex].id,
 94      cityId: this.data.cities[this.data.cIndex].id,
 95      districtId: this.data.areas ? this.data.areas[this.data.aIndex].id : '',
 96      linkMan: e.detail.value.linkMan,
 97      address: e.detail.value.address,
 98      mobile: e.detail.value.mobile,
 99      code: e.detail.value.code,
100    }).then(res => {
101      console.log(res)
102      if (res.code == 0) {
103        wx.showToast({
104          title: '添加成功',
105          icon: 'success'
106        })
107        wx.navigateBack()
108      } else {
109        wx.showToast({
110          title: res.msg,
111          icon: 'none'
112        })
113      }
114    })
115  },
116})


关于更加详细的参数使用,以及更加高级的进阶使用方法,可以参考api接口文档说明:


《api接口文档》


关于  apifm-wxapi 更多的使用方法:


《apifm-wxapi使用说明》


本案例Demo代码下载:


《apifm-wxapi使用Demo程序》


期待你的进步!

感谢!