微信小程序中使用picker封装省市区三级联动的实现

1. 省市区三级联动概述

省市区三级联动，顾名思义就是在省市区三个级别之间进行联动，用户选择一个省份后，就会刷新该省份的所有市区信息，并在用户选择一个市区后，刷新该市区下辖的所有区县信息。它的主要应用场景是在用户填写个人资料时要求填写所在地信息，这样做的优点在于方便用户在填写时进行选择，将输入错误的几率降到最低。

2. picker组件介绍

picker组件是微信小程序提供的用户数据选择器，可以用来取代传统的列表选择器。与传统的列表选择器不同的是，picker组件允许用户通过手指滑动来选择数据，极大地提高了用户的体验感。picker组件的主要特点如下：

2.1 数据源要求

picker组件的数据源必须是一个数组，数组中存储的每一个元素都应该是一个字符串或者一个对象，如果是一个字符串，则该字符串将会作为picker组件的显示内容；如果是一个对象，则该对象的键值对会被解析出来并作为picker组件的显示内容。

2.2 使用方法

picker组件的使用方法非常简单，只需要在页面中添加一个picker组件标签即可，代码示例如下：

<picker mode="selector" bindchange="bindCityChange" value="{{cityIndex}}" range="{{cityData}}">
    <view class="picker">{{cityData[cityIndex]}}</view>
</picker>

picker组件的最上层是一个picker标签，其中mode属性指定了picker组件使用的模式，一共有两种模式可选，分别为selector和multiSelector。selector模式是默认模式，在该模式下，picker组件只提供单列显示；multiSelector模式则提供多列显示。在picker组件内部，还需要指定一个value属性和一个range属性，分别指定当前选择的数据和picker组件的数据源。其中，value属性默认为0，表示初始时picker组件的选中项为第0项；range属性必须是一个数组，数组中的元素可以是字符串也可以是对象。

3. picker联动实现思路

实现picker的联动效果有一定的技巧，下面是实现picker联动的基本思路：

3.1 省市区数据源格式

为了实现picker的联动效果，我们需要对省市区数据进行格式化处理。具体来说，我们需要将省份、城市和区县的数据按照以下的格式进行存储：

var region = [
  {
    "provinceName": "北京市",
    "city": [ { "cityName": "东城区", "area":  [ "和平街道", ... ] } ]
  },
  {
    "provinceName": "海南省",
    "city": [ { "cityName": "三亚市", "area":  [ "凤凰岛镇", ... ] } ]
  },
  ...
]

即每一个省份都是一个对象，其中包含一个provinceName属性表示省份名称，还包含一个city属性，该属性是一个数组，存储了该省份下辖的所有城市。同样，每一个城市也是一个对象，它包含一个cityName属性表示城市名称，一个area属性存储了该城市下辖的所有区县名称。

3.2 picker联动实现步骤

通过上面的数据格式化，我们得到了一个省市区的层级结构。接下来，我们需要使用picker组件实现它们的联动效果，具体实现步骤如下：

获取省份数据源，在页面加载时，我们需要将所有的省份数据源存储在一个数组中，并初始化picker组件。

根据用户选择的省份，获取该省份下辖的所有城市，在picker组件的bindchange事件中，我们可以通过用户选择的省份所对应的索引，获取该省份对应的所有城市列表。

根据用户选择的城市，获取该城市下辖的所有区县，在picker组件的bindchange事件中，我们可以通过用户选择的城市所对应的索引，获取该城市对应的所有区县列表。

将数据源填充到picker组件中，每当获取新的数据源时，我们需要将数据源填充到picker组件中，这样用户才能看到新的数据。

4. 完整代码实现

下面是完整的picker联动实现代码：

Page({
  data: {
    // 省份数据源
    provinceData: [],
    // 城市数据源
    cityData: [],
    // 区县数据源
    areaData: [],
    // 用户选择的省份
    provinceIndex: 0,
    // 用户选择的城市
    cityIndex: 0,
    // 用户选择的区县
    areaIndex: 0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取所有省份信息
    var that = this;
    wx.request({
      url: 'https://xxxxxx',
      success: function(res) {
        that.setData({
          provinceData: res.data.region
        })
      }
    })
  },
  /**
   * 用户选择省份
   */
  bindProvinceChange: function(e) {
    var that = this;
    that.setData({
      provinceIndex: e.detail.value
    })
    // 获取用户选择的省份所对应的城市列表
    wx.request({
      url: 'https://xxxxxx' + that.data.provinceIndex,
      success: function(res) {
        var cityData = res.data.region[0].city;
        // 获取用户选择的第一个城市所对应的区县列表
        wx.request({
          url: 'https://xxxxxx' + cityData[0].cityCode,
          success: function(res) {
            that.setData({
              cityData: cityData,
              areaData: res.data.region[0].area
            })
          }
        })
      }
    })
  },
  /**
   * 用户选择城市
   */
  bindCityChange: function(e) {
    var that = this;
    that.setData({
      cityIndex: e.detail.value
    })
    // 获取用户选择的城市所对应的区县列表
    wx.request({
      url: 'https://xxxxxx' + that.data.cityData[that.data.cityIndex].cityCode,
      success: function(res) {
        that.setData({
          areaData: res.data.region[0].area
        })
      }
    })
  },
  /**
   * 用户选择区县
   */
  bindAreaChange: function(e) {
    var that = this;
    that.setData({
      areaIndex: e.detail.value
    })
  }
})

上面的代码使用了wx.request方法，这是一个异步调用方法，用于获取远程数据，具体使用方法请参考微信小程序官方文档。

5. 总结

本文介绍了在微信小程序中使用picker组件实现省市区三级联动效果的方法。通过对picker组件的介绍，我们了解了其主要特点。在实现picker的联动效果时，我们需要将省、市和区县的数据按照层级关系进行格式化存储，并根据用户选择的省、市和区县获取对应的数据，将数据源填充到picker组件中。