微信小程序云开发之地址（省市区）选择器

为了用户的便利，开发者们往往要投入更多的精力去完成一个功能。明明可以用输入框，所么简单，可非要去选择选择器，多么便利。为用户提供了便利，提高用户体验。

今天的主题就是地址选择器！

当然，这个还是用组件开发会比较快一点。小程序开发我一直都在用Vant组件，使用这个你的界面会容易很多实现。

如果你还没安装Vant，可以去官网查看安装，上面有安装命令。很简单。

安装完Vant，接下来我们就来完成地区选择器吧。

完成步骤：

1. 配置路径
2. 下载地区数据集
3. 编写代码
4. 实现

一、配置路径

安装完Vant，首先要在app.json中引入该模块。该功能需要的模块是area，因为我们还要做弹窗，所以还要引入弹出层popup。

"usingComponents": {
  "van-popup": "@vant/weapp/popup/index",    //修改自己的组件路径
  "van-area": "@vant/weapp/area/index"
}

二、下载地址数据集

因为选择地址这种东西你不可能自己一个个把地址全部列出来，这是不现实的事情，如果你真有那个本事，当然你可以自己列出来，列出来之后用Picker选择器自己完成。

我们这里讲的是area地区选择器。
这里可以选择省市区、也可以选择省市，当然还有其他样式。我们这里只讲一种省市的选择，其他你就自己明白啦

下载数据集地址，你需要把这个area.js文件下载下来。

放进你的项目里面，随便一个地方都行。

三、编写代码

wxml:

<van-cell title="地址" is-link bind:click="showPopup" />
<van-popup 
show="{{ show }}" 
bind:close="onClose"
position="bottom"
custom-style="height: 50%;">
<van-area bind:confirm="onConfirm" bind:cancel="onCancel" area-list="{{ areaList }}" columns-num="{{ 2 }}" title="省市" />
</van-popup>

js:

import province_list from './area'; //导入地址数据集，根据你所存放的位置写路径

data: {
        show: false,
    },


onLoad(){
   this.setData({
     areaList:province_list
   })
 },

onClose() {
        this.setData({ show: false });
      },
    onConfirm(event) {
        console.log(event.detail.values[0].name)
        console.log(event.detail.values[1].name)
        this.setData({
          show:false
        })
      },
    
      onCancel() {
        this.setData({ show: false });
      },

四、实现

几个简单的步骤就轻松完成了地址的选择。

如果有问题，可以下面留言，看到之后第一时间回复。