【微信小程序】自定义省市区数据

由于特殊人员不行情况 需要前端自己搞省市区数据 则冲吧！

使用小程序自带的组件 （picker）实现联动选择

自定义省市区数据 region  自定义数据使用的name range-key

列数据改变触发 bindcolumnchange 计算下一列数据

赋值 bindchange

<picker mode="multiSelector" bindchange="bindchange" bindcolumnchange="bindcolumnchange" value="{{multiIndex}}" range-key="{{name}}" range="{{regionData}}" style="width:100%;flex:1;">
      <view class="picker">
        {{regionData[0][multiIndex[0]]|| ' '}}-{{regionData[1][multiIndex[1]]|| ' '}}-{{regionData[2][multiIndex[2]]|| ' '}}
      </view>
      <view class="picker" wx:else> 选择地区 </view>
    </picker>

获取省市区数据 ：由于小程序包大小限制 则放在了线上 通过下载到本地保存再使用（文件下载本地并使用可参考另外一篇文章）

使用 文件管理及文件下载 api  下载数据并使用setDataArea方法处理数据 （locations location  更改初始化的数据格式）

try {
      let arrBuffer = fs.readFileSync(`${wx.env.USER_DATA_PATH}/addressData.json`, 'utf8', 0)
      let addressData = JSON.parse(arrBuffer)
      console.log(addressData)
      that.setData({
        areaListData: location(addressData),
        areaData: locations(addressData)
      })
      that.setDataArea()
    } catch(e) {
      wx.showLoading({
        title: '加载中...',
        mask: true
      })
      wx.downloadFile({
        url: 'https://oss-test.com/20230613/16866322297881608.json',
        filePath: `${wx.env.USER_DATA_PATH}/addressData.json`,
        success: function (res) {
          console.log(res)
          let arrBuffer = fs.readFileSync(`${wx.env.USER_DATA_PATH}/addressData.json`, 'utf8', 0)
          let addressData = JSON.parse(arrBuffer)
          that.setData({
            areaListData: location(addressData),
            areaData: locations(addressData)
          })
          that.setDataArea()
        }
      })
    }

setDataArea () {
      let chose: any = this.data.chosedList
      let data: any = [[], [], []]
      let index: any = []
      let chosedData: any = {}
        data[0] = this.data.areaListData.areaSelect[0]
        chosedData = this.data.areaData[0]
        this.data.areaData.map((item: any) => {
          if (data[0][0] == item.areaName) {
            chose.provinceCoding = item.coding
            chose.province = item.areaName
            item.childrenList.length > 0 && item.childrenList.map((child: any) => {
              data[1].push(child.areaName)
              chose.city = child.coding
              chose.cityCoding = child.areaName
              if (data[1][0] == child.areaName) {
                child.childrenList.length > 0 && child.childrenList.map((son: any) => {
                  data[2].push(son.areaName)
                  chose.areaCoding = son.coding
                  chose.area = son.areaName
                })
              }
            })
          }
        })
      }
      wx.hideLoading()
      this.setData({
        chosedList: chose,
        multiIndex: index,
        regionData: data,
        chosedData: chosedData
      })
    },

bindMultiPickerColumnChange(e: any) {
      let data: any = this.data.regionData
      let str: any = []
      if (e.detail.column === 0) {
        let arr: any = this.data.areaData[e.detail.value]
        str = [e.detail.value, 0, 0]
        data[1] = this.data.areaData[e.detail.value].nameList
        data[2] = this.data.areaData[e.detail.value].childrenList[0].nameList
        this.setData({
          chosedData: arr
        })
      }else if (e.detail.column === 1) {
        data[2] = this.data.areaData[this.data.multiIndex[0]].childrenList[e.detail.value].nameList
        str = [this.data.multiIndex[0], e.detail.value, 0]
      }else if (e.detail.column === 2) {
        str = [this.data.multiIndex[0], this.data.multiIndex[1], e.detail.value]
      }
      this.setData({
        regionData: data,
        multiIndex: str,
        isFinish: true
      })
    },

bindMultiPickerChange(e: any) {
      this.setData({
        multiIndex: e.detail.value
      })
},