小程序开发与应用 小程序开发教程 开源社区

小程序自定义省市二级联动开发 附源码

作者北京商城开发公司

2月 5, 2018 , , , , , , , , , ,

小程序的picker组件给我们提供了单列、多列、时间、日期、省市区三级联动选择器，用起来非常方便，但有时候无法满足特定的项目需求，所以就需要根据项目需求自己动手实现啦。

项目需求：

小程序自定义省市二级联动开发 附源码

供用户选择省市二级联动选择器，并将省份编码、市级编码存入数据库。
与小程序picker组件mode = region的省市区三级联动不同，这里只需要二级，并且需要省份编码、市级编码。

效果示例：

实现思路：

1.首先前端使用小程序多列选择器：mode = multiSelector，由于省市数据不经常修改，将数据库的省市及对应编码生成json直接保存在本地js文件中，避免接口请求，前端可快速渲染。
2.根据省市json数据将省份列表作为一个数组1，根据当前省份获取的城市列表作为另一个数组2，数组1与数组2组合的二维数据即是picker组件range属性值。

关于picker组件多列选择器属性说明如下：

wxml：

    
      
      
        
          {{provinceCityArray[0][multiIndex[0]].area_name}}-{{provinceCityArray[1][multiIndex[1]].area_name}}

js：

  /**
   * 页面的初始数据
   */
var provinceCity = require("../../../common/ProvinceCityJson.js")

Page({
  data: {
    province_code:"",
    city_code:"",
    provinceCityArray: [provinceCity.getProvinceList, provinceCity.getCityListByProvince("110000")],//默认北京
    multiIndex: [0, 0],
  },
  /**
   * 省市回调函数
   */
  areaPickerChange: function(e) {
    tShopfas.setData({
      multiIndex: e.detail.value,
      province_code: tShopfas.data.provinceCityArray[0][e.detail.value[0]].area_code,
      city_code: tShopfas.data.provinceCityArray[1][e.detail.value[1]].area_code
    })
    console.log("选择结束:" + tShopfas.data.multiIndex + ";province_code:" + tShopfas.data.province_code + ";city_code:" + tShopfas.data.city_code)
  },
  /**
   * 省市切换改变使触发函数，为市级列表赋值
   */
  areaPickerColumnChange: function(e) {
    var data = {
      provinceCityArray: tShopfas.data.provinceCityArray,
      multiIndex: tShopfas.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    var areaCode = data.provinceCityArray[0][e.detail.value].area_code;
    switch (e.detail.column) {
      case 0:
      //切换省份时为第二列市级列表赋值并默认选中第一个
        data.provinceCityArray[1] = provinceCity.getCityListByProvince(areaCode);
        data.multiIndex[1] = 0;
        break;
    }
    tShopfas.setData(data);
  }
})

注意事项：
选择器切换函数的返回参数e.detail.value获取的是下标，而我们想要的是数组的数据，这时候使用data.provinceCityArray[0][e.detail.value].area_code，这样就可以直接获取所选择的编码了

省市及编码本地json：ProvinceCityJson.js

var provinceCity = [{
   "area_code": "110000",
   "area_name": "北京市",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "120000",
   "area_name": "天津市",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "130000",
   "area_name": "河北省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "140000",
   "area_name": "山西省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "150000",
   "area_name": "内蒙古自治区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "210000",
   "area_name": "辽宁省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "220000",
   "area_name": "吉林省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "230000",
   "area_name": "黑龙江省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "310000",
   "area_name": "上海市",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "320000",
   "area_name": "江苏省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "330000",
   "area_name": "浙江省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "340000",
   "area_name": "安徽省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "350000",
   "area_name": "福建省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "360000",
   "area_name": "江西省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "370000",
   "area_name": "山东省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "410000",
   "area_name": "河南省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "420000",
   "area_name": "湖北省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "430000",
   "area_name": "湖南省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "440000",
   "area_name": "广东省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "450000",
   "area_name": "广西壮族自治区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "460000",
   "area_name": "海南省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "500000",
   "area_name": "重庆市",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "510000",
   "area_name": "四川省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "520000",
   "area_name": "贵州省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "530000",
   "area_name": "云南省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "540000",
   "area_name": "西藏自治区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "610000",
   "area_name": "陕西省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "620000",
   "area_name": "甘肃省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "630000",
   "area_name": "青海省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "640000",
   "area_name": "宁夏回族自治区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "650000",
   "area_name": "新疆维吾尔自治区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "710000",
   "area_name": "台湾省",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "810000",
   "area_name": "香港特别行政区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "820000",
   "area_name": "澳门特别行政区",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "990000",
   "area_name": "其他",
   "depth": 1,
   "parent_code": "1"
 },
 {
   "area_code": "110",
   "area_name": "市辖区",
   "depth": 2,
   "parent_code": "110000"
 },
 {
   "area_code": "110200",
   "area_name": "县",
   "depth": 2,
   "parent_code": "110000"
 },
 {
   "area_code": "120",
   "area_name": "市辖区",
   "depth": 2,
   "parent_code": "120000"
 },
 {
   "area_code": "120200",
   "area_name": "县",
   "depth": 2,
   "parent_code": "120000"
 },
 {
   "area_code": "130",
   "area_name": "石家庄市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130200",
   "area_name": "唐山市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130300",
   "area_name": "秦皇岛市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130400",
   "area_name": "邯郸市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130500",
   "area_name": "邢台市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130600",
   "area_name": "保定市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130700",
   "area_name": "张家口市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130800",
   "area_name": "承德市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "130900",
   "area_name": "沧州市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "131000",
   "area_name": "廊坊市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "131100",
   "area_name": "衡水市",
   "depth": 2,
   "parent_code": "130000"
 },
 {
   "area_code": "140",
   "area_name": "太原市",
   "depth": 2,
   "parent_code": "140000"
 }
]
/**
* 获取省份
*/
function getProvinceList() {
 var array = []
 for (var key in provinceCity) {
   if (provinceCity[key].depth == 1) {
     array.push(provinceCity[key])
   }
 }
 return array
}

/*导出方法 */
module.exports = {
 getProvinceList: getProvinceList(),
 getCityListByProvince: function (province) {
   var array = []
   for (var key in provinceCity) {
     if (provinceCity[key].depth == 2 && provinceCity[key].parent_code == province) {
       array.push(provinceCity[key])
     }
   }
   return array
 },
 provinceCity: provinceCity
}

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

小程序自定义省市二级联动开发 附源码

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。

浏览过这篇文章的人，还查看了以下文章

小程序开发与应用 小程序开发多少钱 软件开发与系统定制

如何打造移动分销管理系统?

小程序开发与应用 小程序开发多少钱

多用户商城系统如何做好营销

小程序开发与应用 小程序开发多少钱

新微商时代，微分销商城拯救传统企业