前言

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

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

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

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

功能介绍

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

启用模块

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

找到并启用下述模块：

收货地址管理

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

快递/收货地址管理 - 图1

apifm-wxapi 方法说明

获取所有的收货地址

  1. WXAPI.queryAddress(token)

添加收货地址

  1. WXAPI.addAddress(Object object)

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

更新收货地址

  1. WXAPI.updateAddress(Object object)

获取默认的地址

  1. WXAPI.defaultAddress(token)

读取地址详细

  1. WXAPI.addressDetail(token, id)

删除收货地址

  1. WXAPI.deleteAddress(token, id)

小程序开发

效果截图

快递/收货地址管理 - 图2

快递/收货地址管理 - 图3

小程序代码

收货地址管理

  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>
  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>
  1. const WXAPI = require('apifm-wxapi')
  3. Page({
  4.   data: {
  5.     addressList: undefined
  6.   },
  7.   onLoad: function (options) {
  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>
  1. const WXAPI = require('apifm-wxapi')
  3. Page({
  5.   data: {
  6.     provinces: undefined,// 省份数据数组
  7.     pIndex: 0,//选择的省下标
  8.     cities: undefined,// 城市数据数组
  9.     cIndex: 0,//选择的市下标
  10.     areas: undefined,// 区县数数组
  11.     aIndex: 0,//选择的区下标
  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程序》

期待你的进步！
感谢！