微信小程序，手写一个省市选择组件

本人很懒，技术也很烂，前段时间产品提了一个需求，是省市两级联动，主要在pc和小程序上要数据保持一直，在pc上我是去gitHub上拿的省市数据，然后小程序一开始是用微信原生的省市区选择，待我有时间再改。

时间终于挤出来了

我抽空百度了一下网上的省市小程序组件，发现，卧槽，这么多代码，只是实现一个省市选择吗？，太多了吧，是不是要自己写一个，说干就干。

先看微信的picker组件文档，发现他有一个mode = multiSelector设置多列选择，在配合range="{{region}}"就实现啦，只是他不会联动，得好好想想，然后看见有一个bindcolumnchange（列改变时会触发）属性，好似材料准备的差不多了，就差省市的数据了，picker传值是一个数组，数组里套几个数组，跟我的省市数据结构很不同，复制黏贴吧，又太烦，灵机一动，想到了node，准备用fs模块写一个满足条件的数据，

var fs = require("fs");

let cityJson = [{"value":"11","label":"北京市","children":[{"value":"110101","label":"东城区"},{"value":"110102","label":"西城区"},{"value":"110105","label":"朝阳区"},{"value":"110106","label":"丰台区"},{"value":"110107","label":"石景山区"},{"value":"110108","label":"海淀区"},{"value":"110109","label":"门头沟区"},{"value":"110111","label":"房山区"},{"value":"110112","label":"通州区"},{"value":"110113","label":"顺义区"},{"value":"110114","label":"昌平区"},{"value":"110115","label":"大兴区"},{"value":"110116","label":"怀柔区"},{"value":"110117","label":"平谷区"},{"value":"110118","label":"密云区"},{"value":"110119","label":"延庆区"}]}...]
console.log("准备写入文件");
let obj = {}
    cityJson.forEach(item=>{
      let list = []
      let key = item.label
      item.children.forEach(city=>{
        list.push(city.label)
      })
      obj[key] = list
    })
fs.writeFile('input.js', JSON.stringify(obj),  function(err) {
   if (err) {
       return console.error(err);
   }
   console.log("数据写入成功！");
   
});

然后在bindcolumnchange里重新赋值就可以实现啦 小程序代码实现如下：

js代码：
在data里定义如下值：
region:['3','1'],
regionPick:'广东省-深圳市',
regionArr:[],
provinceList:[],
cityList:[]


wxml：
<picker mode="multiSelector" range="{{regionArr}}" bindchange='changeRegion' value='{{region}}' bindcolumnchange="changeProvince">
    {{regionPick}}
</picker>

js：

// 实现层级联动
changeProvince(e){
    if (e.detail.column==0) {
      let index = e.detail.value
      let list = this.data.provinceList
      this.setData({
        regionArr:[list,this.data.cityList[index]]
      })
    }
  },
  
// 选中的赋值
 changeRegion(e){
    let pid = e.detail.value[0]
    let cid = e.detail.value[1]
    this.setData({
      regionPick:this.data.provinceList[pid]+'-'+this.data.cityList[pid][cid]
    })
  },