前言

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

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

功能说明

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

小程序实现

效果演示

省市区联动Demo

wxml代码

view class="page"  view class="page__bd"    view class="weui-cells__title"选择/view    view class="weui-cells weui-cells_after-title"      view class="weui-cell weui-cell_select"        view class="weui-cell__hd weui-cell__hd_in-select-after"          view class="weui-label"省份/view        /view        view class="weui-cell__bd"          picker bindchange="provinceChange" value="{{pIndex}}" range="{{provinces}}" range-key="name"            view class="weui-select weui-select_in-select-after"{{provinces[pIndex].name}}/view          /picker        /view      /view      view wx:if="{{cities}}" class="weui-cell weui-cell_select"        view class="weui-cell__hd weui-cell__hd_in-select-after"          view class="weui-label"城市/view        /view        view class="weui-cell__bd"          picker bindchange="cityChange" value="{{cIndex}}" range="{{cities}}" range-key="name"            view class="weui-select weui-select_in-select-after"{{cities[cIndex].name}}/view          /picker        /view      /view      view wx:if="{{areas}}" class="weui-cell weui-cell_select"        view class="weui-cell__hd weui-cell__hd_in-select-after"          view class="weui-label"区县/view        /view        view class="weui-cell__bd"          picker bindchange="areaChange" value="{{aIndex}}" range="{{areas}}" range-key="name"            view class="weui-select weui-select_in-select-after"{{areas[aIndex].name}}/view          /picker        /view      /view      view wx:if="{{streets}}" class="weui-cell weui-cell_select"        view class="weui-cell__hd weui-cell__hd_in-select-after"          view class="weui-label"街道/镇/view        /view        view class="weui-cell__bd"          picker bindchange="streetChange" value="{{sIndex}}" range="{{streets}}" range-key="name"            view class="weui-select weui-select_in-select-after"{{streets[sIndex].name}}/view          /picker        /view      /view      view wx:if="{{communities}}" class="weui-cell weui-cell_select"        view class="weui-cell__hd weui-cell__hd_in-select-after"          view class="weui-label"社区/村委会/view        /view        view class="weui-cell__bd"          picker bindchange="communityChange" value="{{ccIndex}}" range="{{communities}}" range-key="name"            view class="weui-select weui-select_in-select-after"{{communities[ccIndex].name}}/view          /picker        /view      /view    /view  /view/view

js代码

const WXAPI = require('apifm-wxapi')WXAPI.init('gooking')Page({  data: {    provinces: undefined,// 省份数据数组    pIndex: 0,//选择的省下标    cities: undefined,// 城市数据数组    cIndex: 0,//选择的市下标    areas: undefined,// 区县数数组    aIndex: 0,//选择的区下标    streets: undefined,// 街道/镇数据数组    sIndex: 0,// 选择的街道下标    communities: undefined,//社区/村委会数据数组    ccIndex: 0,// 选择的社区下标  },  onLoad: function (options) {    WXAPI.province().then(res = {      if (res.code == 0) {        this.setData({          provinces: res.data        })      }    })  },  provinceChange(e){    const index = e.detail.value    this.setData({      pIndex: index    })    const pid = this.data.provinces[index].id    WXAPI.nextRegion(pid).then(res = {      console.log(res)      if (res.code == 0) {        this.setData({          cities: res.data        })      }    })  },  cityChange(e){    const index = e.detail.value    this.setData({      cIndex: index    })    const pid = this.data.cities[index].id    WXAPI.nextRegion(pid).then(res = {      console.log(res)      if (res.code == 0) {        this.setData({          areas: res.data        })      }    })  },  areaChange(e){    const index = e.detail.value    this.setData({      aIndex: index    })    const pid = this.data.areas[index].id    WXAPI.nextRegion(pid).then(res = {      console.log(res)      if (res.code == 0) {        this.setData({          streets: res.data        })      }    })  },  streetChange(e){    const index = e.detail.value    this.setData({      sIndex: index    })    const pid = this.data.streets[index].id    WXAPI.nextRegion(pid).then(res = {      console.log(res)      if (res.code == 0) {        this.setData({          communities: res.data        })      }    })  },  communityChange(e){    const index = e.detail.value    this.setData({      ccIndex: index    })    const pid = this.data.communities[index].id    WXAPI.nextRegion(pid).then(res = {      console.log(res)      // 似乎没有下级了    })  },})