微信小程序 使用picker封装省市区三级联动实例代码

<?php header("Content-type: text/html; charset=utf-8");   $type=$_REQUEST["type"];//获取省市区的标志 $fcode=$_GET["fcode"];  $retArr=[   "status"=>true,   "data"=>[],   "msg"=>"" ];  if($type!="province" && $type!="city" && $type!="county"){   $retArr["status"]=false;   $retArr["msg"]="获取地区类型错误，请检查";      echo json_encode($retArr);   exit; }  function getProvince(){   $province=[];   $code=["110000", "350000", "710000"];   $province["code"]=$code;   $name=["北京市", "福建省", "台湾省"];   $province["name"]=$name;   $fcode=["0", "0", "0"];   $province["fcode"]=$fcode;   return $province; } function getCity($P_fcode){   $city=[];   $code=[];   $name=[];   $fcode=[];   if($P_fcode=="110000"){     $code=["110100"];     $name=["北京市"];     $fcode=$P_fcode;   }   if($P_fcode=="350000"){     $code=["350100", "350200", "350300", "350400", "350500", "350600", "350700", "350800", "350900"];     $name=["福州市", "厦门市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龙岩市", "宁德市"];     $fcode=$P_fcode;   }   if($P_fcode=="710000"){        }   $city=["code"=>$code, "name"=>$name, "fcode"=>$fcode];   return $city; } function getCounty($P_fcode){   $county=[];   $code=[];   $name=[];   $fcode=[];    if($P_fcode=="110100"){     $code=["110101", "110102", "110103", "110104", "110105", "110106", "110107"];     $name=["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区"];     $fcode=$P_fcode;   }   if($P_fcode=="350100"){     $code=["350102", "350103", "350104"];     $name=["鼓楼区", "台江区", "苍山区"];     $fcode=$P_fcode;   }   if($P_fcode=="350200"){     $code=["350203", "350205", "350206"];     $name=["思明区", "海沧区", "湖里区"];     $fcode=$P_fcode;   }   $county=["code"=>$code, "name"=>$name, "fcode"=>$fcode];   return $county; }  //var_dump($province); if($type=="province"){   $province=getProvince();   $retArr["data"]=$province;  }else if($type=="city"){   $city=getCity($fcode);   $retArr["data"]=$city; }else if($type="county"){   $county=getCounty($fcode);   $retArr["data"]=$county; }  echo json_encode($retArr);   ?> 

<template name="city"> <view class="areas">  <view class="province">   <picker bindchange="provincePickerChange" value="{{provinceIndex}}" range="{{province.name}}" data-city-url="{{cityUrl}}">   <text class="select-item">{{province.name[provinceIndex]}}</text>   </picker>  </view>   <view class="city">  <block wx:if="{{!city.name.length}}"> --二级市区-- </block>  <block wx:if="{{city.name.length>0}}">    <picker bindchange="cityPickerChange" value="{{cityIndex}}" range="{{city.name}}" data-county-url="{{countyUrl}}">    <text class="select-item">{{city.name[cityIndex]}}</text>   </picker>  </block>  </view>   <view class="county">  <block wx:if="{{!county.name.length}}"> --三级地区-- </block>  <block wx:if="{{county.name.length>0}}">   <picker bindchange="countyPickerChange" value="{{countyIndex}}" range="{{county.name}}">    <text class="select-item">{{county.name[countyIndex]}}</text>   </picker>  </block>  </view>  </view> </template> 

/**  * 获取三级联动的三个函数  * that:  注册页面的this实例 必填  * p_url: 一级省份url 必填  * p_data：一级省份参数 选填  */ var net = require( "net" );//引入request方法 var g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method;  function initCityFun( that, p_url, p_data ) {   //获取一级省份数据   g_cbSuccess = function( res ) {    that.setData( {     'city.province': res    });   };   net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );    //点击一级picker触发事件并获取市区方法   var changeProvince = function( e ) {     that.setData( {       'city.provinceIndex': e.detail.value     });     var _fcode = that.data.city.province.code[ e.detail.value ];     if( !_fcode ) {       _fcode = 0;     }     var _cityUrl = e.target.dataset.cityUrl;      g_url = _cityUrl + _fcode;     g_cbSuccess = function( res ) {       that.setData( {         'city.city': res       });     }     net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );   };   that[ "provincePickerChange" ] = changeProvince;    //点击二级picker触发事件并获取地区方法   var changeCity = function( e ) {     that.setData( {       'city.cityIndex': e.detail.value     });     var _fcode = that.data.city.city.code[ e.detail.value ];     if( !_fcode ) {       _fcode = 0;     }     var _countyUrl = e.target.dataset.countyUrl;     g_url = _countyUrl + _fcode;      g_cbSuccess = function( res ) {       that.setData( {         'city.county': res       });     };     net.r( g_url, g_datd, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method );   };   that[ "cityPickerChange" ] = changeCity;    //点击三级picker触发事件   var changeCounty = function( e ) {     that.setData( {       'city.countyIndex': e.detail.value     });   };   that["countyPickerChange"]=changeCounty; }  function getProvinceFun(that, p_url, p_data){   g_cbSuccess = function( res ) {    that.setData( {     'city.province': res    });   };   net.r( p_url, p_data, g_cbSuccess, g_cbSuccessErr, g_cbFail, g_cbComplete, g_header, g_method ); }  module.exports={   initCityFun: initCityFun,   getProvinceFun: getProvinceFun } 

/**  * 网络发送http请求,默认为返回类型为json  *   * url: 必须,其他参数非必须 接口地址  * data:请求的参数 Object或String  * successFun(dts):成功返回的回调函数，已自动过滤微信端添加数据,按接口约定,返回成功后的data数据,过滤掉msg和status  * successErrorFun(msg):成功执行请求,但是服务端认为业务错误,执行其他行为,默认弹出系统提示信息.  * failFun:接口调用失败的回调函数  * completeFun:接口调用结束的回调函数（调用成功、失败都会执行）  * header:object,设置请求的 header , header 中不能设置 Referer  * method:默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  *   */ function r( url, data, successFun, successErrorFun, failFun, completeFun, header, method ) {   var reqObj = {};   reqObj.url = url;   reqObj.data = data;    //默认头为json   reqObj.header = { 'Content-Type': 'application/json' };   if( header ) {     //覆盖header     reqObj.header = header;   }     if( method ) {     reqObj.method = method;   }   reqObj.success = function( res ) {     var returnData = res.data; //将微信端结果过滤,获取服务端返回的原样数据     var status = returnData.status; //按接口约定,返回status时,才调用成功函数     //console.log(res);     //正常执行的业务函数     if( status == true ) {       if( successFun ) {         var dts = returnData.data;         successFun( dts );//回调，相当于获取到data后直接在回调里面处理赋值数据       }     } else if( status == false ) {       var msg = returnData.msg;       if( !successErrorFun ) {         console.log( msg );       } else {         successErrorFun( msg );       }      } else {       console.log( "服务端没有按照接口约定格式返回数据" );     }     }   reqObj.fail = function( res ) {     if( failFun ) {       failFun( res );     }   }   reqObj.complete = function( res ) {     if( completeFun ) {       completeFun( res );     }   }     wx.request( reqObj ); }  module.exports = {   r: r } 

<import src="../../template/cityTemplate.wxml"/> <template is="city" data="{{...city}}" /> 

var city = require( '../../common/cityTemplate' ); Page( {  data: {   },  onLoad: function( options ) {   var _that = this;   //创建三级联动数据对象 ---- 这个city对象是固定的，只有请求的url是根据各自的服务端地址来更改的   _that.setData( {    city: {     province: {},//格式province:{code: ["11000", "12000"], name: ["北京市", "上海市"]},只能固定是name和code，因为模板需要根据这俩参数显示     city: {},     county: {},     provinceIndex: 0,     cityIndex: 0,     countyIndex: 0,     cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type表示获取地区 fcode是一级code码，到时具体根据后端请求参数修改     countyUrl: "http://localhost:8282/phpserver/areas.php?type=county&fcode="    }   })   var _url = "http://localhost:8282/phpserver/areas.php";   var _data = { 'type': 'province', 'fcode': '0' };   city.initCityFun( _that, _url, _data );  } })