前言

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

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

功能说明

本案例行政区数据采用国家统计局2017年公布的权威数据，地区编码为国标；
小程序实现5级联动，实现 省/市/区/街道/社区 以及 镇/村委会 级别的数据联动；

小程序实现

效果演示

「省/市/区/街道/社区」5级联动 - 图1

wxml代码

  1. <view class="page">
  2.   <view class="page__bd">
  3.     <view class="weui-cells__title">选择</view>
  4.     <view class="weui-cells weui-cells_after-title">
  5.       <view class="weui-cell weui-cell_select">
  6.         <view class="weui-cell__hd weui-cell__hd_in-select-after">
  7.           <view class="weui-label">省份</view>
  8.         </view>
  9.         <view class="weui-cell__bd">
  10.           <picker bindchange="provinceChange" value="{{pIndex}}" range="{{provinces}}" range-key="name">
  11.             <view class="weui-select weui-select_in-select-after">{{provinces[pIndex].name}}</view>
  12.           </picker>
  13.         </view>
  14.       </view>
  15.       <view wx:if="{{cities}}" class="weui-cell weui-cell_select">
  16.         <view class="weui-cell__hd weui-cell__hd_in-select-after">
  17.           <view class="weui-label">城市</view>
  18.         </view>
  19.         <view class="weui-cell__bd">
  20.           <picker bindchange="cityChange" value="{{cIndex}}" range="{{cities}}" range-key="name">
  21.             <view class="weui-select weui-select_in-select-after">{{cities[cIndex].name}}</view>
  22.           </picker>
  23.         </view>
  24.       </view>
  25.       <view wx:if="{{areas}}" class="weui-cell weui-cell_select">
  26.         <view class="weui-cell__hd weui-cell__hd_in-select-after">
  27.           <view class="weui-label">区县</view>
  28.         </view>
  29.         <view class="weui-cell__bd">
  30.           <picker bindchange="areaChange" value="{{aIndex}}" range="{{areas}}" range-key="name">
  31.             <view class="weui-select weui-select_in-select-after">{{areas[aIndex].name}}</view>
  32.           </picker>
  33.         </view>
  34.       </view>
  35.       <view wx:if="{{streets}}" class="weui-cell weui-cell_select">
  36.         <view class="weui-cell__hd weui-cell__hd_in-select-after">
  37.           <view class="weui-label">街道/镇</view>
  38.         </view>
  39.         <view class="weui-cell__bd">
  40.           <picker bindchange="streetChange" value="{{sIndex}}" range="{{streets}}" range-key="name">
  41.             <view class="weui-select weui-select_in-select-after">{{streets[sIndex].name}}</view>
  42.           </picker>
  43.         </view>
  44.       </view>
  45.       <view wx:if="{{communities}}" class="weui-cell weui-cell_select">
  46.         <view class="weui-cell__hd weui-cell__hd_in-select-after">
  47.           <view class="weui-label">社区/村委会</view>
  48.         </view>
  49.         <view class="weui-cell__bd">
  50.           <picker bindchange="communityChange" value="{{ccIndex}}" range="{{communities}}" range-key="name">
  51.             <view class="weui-select weui-select_in-select-after">{{communities[ccIndex].name}}</view>
  52.           </picker>
  53.         </view>
  54.       </view>
  55.     </view>
  57.   </view>
  58. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  6.   data: {
  7.     provinces: undefined,// 省份数据数组
  8.     pIndex: 0,//选择的省下标
  9.     cities: undefined,// 城市数据数组
  10.     cIndex: 0,//选择的市下标
  11.     areas: undefined,// 区县数数组
  12.     aIndex: 0,//选择的区下标
  13.     streets: undefined,// 街道/镇数据数组
  14.     sIndex: 0,// 选择的街道下标
  15.     communities: undefined,//社区/村委会数据数组
  16.     ccIndex: 0,// 选择的社区下标
  17.   },
  18.   onLoad: function (options) {
  19.     WXAPI.province().then(res => {
  20.       if (res.code == 0) {
  21.         this.setData({
  22.           provinces: res.data
  23.         })
  24.       }
  25.     })
  26.   },
  27.   provinceChange(e){
  28.     const index = e.detail.value
  29.     this.setData({
  30.       pIndex: index
  31.     })
  32.     const pid = this.data.provinces[index].id
  33.     WXAPI.nextRegion(pid).then(res => {
  34.       console.log(res)
  35.       if (res.code == 0) {
  36.         this.setData({
  37.           cities: res.data
  38.         })
  39.       }
  40.     })
  41.   },
  42.   cityChange(e){
  43.     const index = e.detail.value
  44.     this.setData({
  45.       cIndex: index
  46.     })
  47.     const pid = this.data.cities[index].id
  48.     WXAPI.nextRegion(pid).then(res => {
  49.       console.log(res)
  50.       if (res.code == 0) {
  51.         this.setData({
  52.           areas: res.data
  53.         })
  54.       }
  55.     })
  56.   },
  57.   areaChange(e){
  58.     const index = e.detail.value
  59.     this.setData({
  60.       aIndex: index
  61.     })
  62.     const pid = this.data.areas[index].id
  63.     WXAPI.nextRegion(pid).then(res => {
  64.       console.log(res)
  65.       if (res.code == 0) {
  66.         this.setData({
  67.           streets: res.data
  68.         })
  69.       }
  70.     })
  71.   },
  72.   streetChange(e){
  73.     const index = e.detail.value
  74.     this.setData({
  75.       sIndex: index
  76.     })
  77.     const pid = this.data.streets[index].id
  78.     WXAPI.nextRegion(pid).then(res => {
  79.       console.log(res)
  80.       if (res.code == 0) {
  81.         this.setData({
  82.           communities: res.data
  83.         })
  84.       }
  85.     })
  86.   },
  87.   communityChange(e){
  88.     const index = e.detail.value
  89.     this.setData({
  90.       ccIndex: index
  91.     })
  92.     const pid = this.data.communities[index].id
  93.     WXAPI.nextRegion(pid).then(res => {
  94.       console.log(res)
  95.       // 似乎没有下级了
  96.     })
  97.   },
  98. })

WXAPI.init(‘gooking’) 这句代码是将你的小程序链接到你的后台，其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

apifm-wxapi 最多可实现5级数据的获取，在实际应用中已经足够了（和某宝的地址体系详细程度一致）

通常的业务场景下，一般只需要2-3级就可以，你可以根据自己的实际需要修改上述的小程序代码，够用原则，注重用户体验！

拓展：

微信自带读取收货地址的api接口，开动脑筋，试着动手去实现微信自带读取用户收货地址和本案例地址系的整合兼容，期待你的作品。

期待你的进步！
感谢！