欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

使用picker封装省市区三级联动模板

发布：2018-01-25 11:00浏览： 次来源：网络 作者：tianshu

目前学习小程序更多的是看看能否二次封装其它组件，利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉，那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢？答案是肯定可以的。那么我的思路是这样的：

1、使用template模板语法进行封装，数据从页面传入
2、根据picker组件的语法，range只能是一组中文地区数组，但是我们需要每个地区的唯一码来触发下一级联动数据。这样，我的做法是通过一个对象里面的两组数据分表存储中文名和唯一码的两个对象数组。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】，这个格式是固定的，需要服务端配合返回
3、通过picker的bindchange事件来获取下一级的数据，每个方法都写入函数中在暴露出来供页面调用

然后讲下我demo的目录结构：
common
    -net.js//wx.request请求接口二次整合
    -cityTemplate.js//三级联动方法
page
    -demo
        -demo.js
        -demo.wxml
template
    -cityTemplate.wxml
app.js
app.json
app.wxss

然后，使用phpstudy搭建了简单的服务端供测试。不要问我服务端的为啥是这样的，我也不懂，刚入门我只要数据...
当然你可以省掉这一步，将数据直接固定在demo.js里面进行测试...
代码如下：【服务端的返回数据格式是遵循了下面的retArr的规范的】

  1. <?php  
  2. header("Content-type: text/html; charset=utf-8");   
  3.   
  4. $type=$_REQUEST["type"];//获取省市区的标志  
  5. $fcode=$_GET["fcode"];  
  6.   
  7. $retArr=[  
  8.     "status"=>true,  
  9.     "data"=>[],  
  10.     "msg"=>""  
  11. ];  
  12.   
  13. if($type!="province" && $type!="city" && $type!="county"){  
  14.     $retArr["status"]=false;  
  15.     $retArr["msg"]="获取地区类型错误，请检查";  
  16.       
  17.     echo json_encode($retArr);  
  18.     exit;  
  19. }  
  20.   
  21. function getProvince(){  
  22.     $province=[];  
  23.     $code=["110000", "350000", "710000"];  
  24.     $province["code"]=$code;  
  25.     $name=["北京市", "福建省", "台湾省"];  
  26.     $province["name"]=$name;  
  27.     $fcode=["0", "0", "0"];  
  28.     $province["fcode"]=$fcode;  
  29.     return $province;  
  30. }  
  31. function getCity($P_fcode){  
  32.     $city=[];  
  33.     $code=[];  
  34.     $name=[];  
  35.     $fcode=[];  
  36.     if($P_fcode=="110000"){  
  37.         $code=["110100"];  
  38.         $name=["北京市"];  
  39.         $fcode=$P_fcode;  
  40.     }  
  41.     if($P_fcode=="350000"){  
  42.         $code=["350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"];  
  43.         $name=["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"];  
  44.         $fcode=$P_fcode;  
  45.     }  
  46.     if($P_fcode=="710000"){  
  47.           
  48.     }  
  49.     $city=["code"=>$code, "name"=>$name, "fcode"=>$fcode];  
  50.     return $city;  
  51. }  
  52. function getCounty($P_fcode){  
  53.     $county=[];  
  54.     $code=[];  
  55.     $name=[];  
  56.     $fcode=[];    
  57.     if($P_fcode=="110100"){  
  58.         $code=["110101", "110102", "110103", "110104", "110105", "110106", "110107"];  
  59.         $name=["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区"];  
  60.         $fcode=$P_fcode;  
  61.     }  
  62.     if($P_fcode=="350100"){  
  63.         $code=["350102", "350103", "350104"];  
  64.         $name=["鼓楼区", "台江区", "苍山区"];  
  65.         $fcode=$P_fcode;  
  66.     }  
  67.     if($P_fcode=="350200"){  
  68.         $code=["350203", "350205", "350206"];  
  69.         $name=["思明区", "海沧区", "湖里区"];  
  70.         $fcode=$P_fcode;  
  71.     }  
  72.     $county=["code"=>$code, "name"=>$name, "fcode"=>$fcode];  
  73.     return $county;  
  74. }  
  75.   
  76. //var_dump($province);  
  77. if($type=="province"){  
  78.     $province=getProvince();  
  79.     $retArr["data"]=$province;    
  80. }else if($type=="city"){  
  81.     $city=getCity($fcode);  
  82.     $retArr["data"]=$city;  
  83. }else if($type="county"){  
  84.     $county=getCounty($fcode);  
  85.     $retArr["data"]=$county;  
  86. }  
  87.   
  88. echo json_encode($retArr);  
  89.   
  90.   
  91. ?>  

接下来是cityTemplate.wxml：

  1. <template name="city">  
  2. <view class="areas">  
  3.   <view class="province">  
  4.     <picker bindchange="provincePickerChange" value="{{provinceIndex}}" range="{{province.name}}" data-city-url="{{cityUrl}}">  
  5.     <text class="select-item">{{province.name[provinceIndex]}}</text>  
  6.     </picker>  
  7.   </view>  
  8.   
  9.   <view class="city">  
  10.   <block wx:if="{{!city.name.length}}"> --二级市区-- </block>  
  11.   <block wx:if="{{city.name.length>0}}">   
  12.     <picker bindchange="cityPickerChange" value="{{cityIndex}}" range="{{city.name}}" data-county-url="{{countyUrl}}">  
  13.       <text class="select-item">{{city.name[cityIndex]}}</text>  
  14.     </picker>  
  15.   </block>  
  16.   </view>  
  17.   
  18.   <view class="county">  
  19.   <block wx:if="{{!county.name.length}}"> --三级地区-- </block>  
  20.   <block wx:if="{{county.name.length>0}}">  
  21.     <picker bindchange="countyPickerChange" value="{{countyIndex}}" range="{{county.name}}">  
  22.       <text class="select-item">{{county.name[countyIndex]}}</text>  
  23.     </picker>  
  24.   </block>  
  25.   </view>  
  26.   
  27. </view>  
  28. </template>  

cityTemplate.js

  1. /**  
  2. * 获取三级联动的三个函数  
  3. * that:   注册页面的this实例 必填  
  4. * p_url:  一级省份url 必填  
  5. * p_data：一级省份参数 选填  
  6. */  
  7. var net = require( "net" );//引入request方法  
  8. var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method;  
  9.   
  10.   
  11. function initCityFun( that, p_url, p_data ) {  
  12.     //获取一级省份数据  
  13.     console.log(p_url+JSON.stringify(p_data));  
  14.     g_cbSuccess = function( res ) {  
  15.       that.setData( {  
  16.         'city.province': res  
  17.       });  
  18.     };  
  19.     net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );  
  20.   
  21.   
  22.     //点击一级picker触发事件并获取市区方法  
  23.     var changeProvince = function( e ) {  
  24.         that.setData( {  
  25.             'city.city': {},  
  26.             'city.county': {},  
  27.             'city.provinceIndex': e.detail.value,  
  28.             'city.cityIndex': 0,  
  29.             'city.countyIndex': 0  
  30.         });  
  31.         var _fcode = that.data.city.province.code[ e.detail.value ];  
  32.         if( !_fcode ) {  
  33.             _fcode = 0;  
  34.         }  
  35.         var _cityUrl = e.target.dataset.cityUrl;  
  36.   
  37.   
  38.         g_url = _cityUrl + _fcode;  
  39.   
  40.   
  41.         console.log("province:"+g_url);  
  42.   
  43.   
  44.         g_cbSuccess = function( res ) {  
  45.             console.log(res);  
  46.             that.setData( {  
  47.                 'city.city': res  
  48.             });  
  49.         }  
  50.         net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );  
  51.     };  
  52.     that[ "provincePickerChange" ] = changeProvince;  
  53.   
  54.   
  55.     //点击二级picker触发事件并获取地区方法  
  56.     var changeCity = function( e ) {  
  57.         that.setData( {  
  58.             'city.county': {},  
  59.             'city.cityIndex': e.detail.value,  
  60.             'city.countyIndex': 0  
  61.         });  
  62.         var _fcode = that.data.city.city.code[ e.detail.value ];  
  63.         if( !_fcode ) {  
  64.             _fcode = 0;  
  65.         }  
  66.         var _countyUrl = e.target.dataset.countyUrl;  
  67.         g_url = _countyUrl + _fcode;  
  68.   
  69.   
  70.         g_cbSuccess = function( res ) {  
  71.             that.setData( {  
  72.                 'city.county': res  
  73.             });  
  74.         };  
  75.         net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );  
  76.     };  
  77.     that[ "cityPickerChange" ] = changeCity;  
  78.   
  79.   
  80.     //点击三级picker触发事件  
  81.     var changeCounty = function( e ) {  
  82.         that.setData( {  
  83.             'city.countyIndex': e.detail.value  
  84.         });  
  85.     };  
  86.     that["countyPickerChange"]=changeCounty;  
  87. }  
  88.   
  89.   
  90. function getProvinceFun(that, p_url, p_data){  
  91.     g_cbSuccess = function( res ) {  
  92.       that.setData( {  
  93.         'city.province': res  
  94.       });  
  95.     };  
  96.     net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );  
  97. }  
  98.   
  99.   
  100. module.exports={  
  101.     initCityFun: initCityFun,  
  102.     getProvinceFun: getProvinceFun  
  103. }  
 
  1. <style type="text/css">
  2. p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Times; color: #999999; -webkit-text-stroke: #999999}
  3. span.s1 {font-kerning: none}
  4. </style>
  5.  
  6.  
  7. <p class="p1"><span class="s1"><font color="#000000">顺道net.js方法：</font></span></p><p class="p1"><span class="s1">
  8. </span></p>


核心代码就是上面这三个文件，接下来是demo文件做测试：
demo.wxml：
 
  1. <import src="../../template/cityTemplate.wxml"/>  
  2. <template is="city" data="{{...city}}" />
 
demo.js：
 
  1. var city = require( '../../common/cityTemplate' );  
  2. Page( {  
  3.   data: {  
  4.   
  5.   },  
  6.   onLoad: function( options ) {  
  7.     var _that = this;  
  8.     //创建三级联动数据对象 ---- 这个city对象是固定的，只有请求的url是根据各自的服务端地址来更改的  
  9.     _that.setData( {  
  10.       city: {  
  11.         province: {},//格式province:{code: ["11000", "12000"], name: ["北京市", "上海市"]},只能固定是name和code，因为模板需要根据这俩参数显示  
  12.         city: {},  
  13.         county: {},  
  14.         provinceIndex: 0,  
  15.         cityIndex: 0,  
  16.         countyIndex: 0,  
  17.         cityUrl: "https://localhost:8282/phpserver/areas.php?type=city&fcode=",//type表示获取地区 fcode是一级code码，到时具体根据后端请求参数修改  
  18.         countyUrl: "https://localhost:8282/phpserver/areas.php?type=county&fcode="  
  19.       }  
  20.     })  
  21.     var _url = "https://localhost:8282/phpserver/areas.php";  
  22.     var _data = { 'type': 'province', 'fcode': '0' };  
  23.     city.initCityFun( _that, _url, _data );  
  24.   }  
  25. })  

这里存在一个bug，开启下拉刷新和picker组件的下拉会重叠了，不知道是开发工具原因，还是还为修改的bug。。。只能等微信方面更新消息给反馈了


今天更新的0.10.102700这个版本后，发现使用text组件触发不了picker组件了，经过一番测试后需把picker组件内的text标签换成view标签才能正常执行业务。

以上实例的cityTemplate.wxml文件里面text标签请自行更换成view标签。在进行测试~




免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有