前言
本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：
本案例中，部分功能，需要用户登录后才能操作，也就是说需要 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接口文档说明：
关于 apifm-wxapi 更多的使用方法：
本案例Demo代码下载：
期待你的进步！
感谢！