range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器

早在一年多以前，我写过一篇微信小程序-省市区县三级联动选择器的文章，那时候小程序刚起步，网上找了很久没有相关的文献，官方也没有相关的组件，我就自己动手写了一个，也因为刚开始接触写的不是很好。

当时省市区的数据我是在网上找的一个json文档，然后把里面的json数据复制出来，在js文件里写了一个方法用数组接收复制出来的json数据，外部调用这个方法就直接返回这个数组，因为json数据有几百k的占用，显然不是很符合小程序的“小”的初衷。

最近无事，研究了下云开发，我就想把数据放在云端数据库，重写一下省市区三级联动选择器。后来在查看小程序组件的时候发现，现在官方组件picker专门为我们提供了"省市区选择器"这个控件，假如单单只是需要文字形式的"省市区选择器"，大家可以选用官方的，性能方面以及简易方面应该更适合普通开发者，因为直接接入就行了，不用写内部复杂的逻辑。

图1-官方省市区选择器文档说明

省市区选择器

当前选择：{ {region[0]}}，{ {region[1]}}，{ {region[2]}}

//.js

//点击确定按钮

bindRegionChange: function (e) {

console.log(e)

console.log('picker发送选择改变，携带值为', e.detail.value)

this.setData({

region: e.detail.value

})

}

但是我们往往不只是需要e.detail.value里面的省市区名字，可能后台只需要传code就行了。按图1bingchange的属性是有code的但是我打印e.detail.code发现是没有code的。不知道是不是我版本的问题，反正打印除了e.detail.value有值postcode和code都是没值的，那怎么办呢？没值我就自己造值，从某接口获取了一份数据，已经按省市区三维数组处理好了，我存在了云数据库里。

因为官方的"省市区选择器"mode="region"里的数组是定死的由微信提供，不能做更改，好在同是piker组件mode="multiSelector"时提供了自定义的"多列选择器"：