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

前言

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

《创建 HelloWorld 项目》

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

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

功能说明

本案例行政区数据采用国家统计局2017年公布的权威数据，地区编码为国标；

小程序实现5级联动，实现省/市/区/街道/社区以及镇/村委会级别的数据联动；

小程序实现

效果演示

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>
56
57  </view>
58</view>

js代码

 1const WXAPI = require('apifm-wxapi')
 2WXAPI.init('gooking')
 3
 4Page({
 5
 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接口，开动脑筋，试着动手去实现微信自带读取用户收货地址和本案例地址系的整合兼容，期待你的作品。

期待你的进步！

感谢！