這篇文章主要介紹了微信小程式 使用picker封裝省市區三級關聯執行個體代碼的相關資料,需要的朋友可以參考下
微信小程式 使用picker封裝省市區三級關聯執行個體
目前學習小程式更多的是看看能否二次封裝其它元件，利于以後能快速開發各種小程式應用。目前發現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的規範的】
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);
?>
接下來是cityTemplate.wxml：：
{{province.name[provinceIndex]}}
--二級市區--
{{city.name[cityIndex]}}
--三級地區--
{{county.name[countyIndex]}}
cityTemplate.js：：
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
}
順道net.js方法：：
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
}
核心代碼就是上面這三個檔案，接下來是demo檔案做測試：：
demo.wxml：：
demo.js：：
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 );
}
})
以上完整代碼檔案，最終測試如下：
這裡存在一個bug，開啟下拉重新整理和picker元件的下拉會重疊了，不知道是開發工具原因，還是還為修改的bug。。。隻能等微信方面更新消息給回報了
以上就是本文的全部内容，希望對大家的學習有所幫助，更多相關内容請關注PHP中文網！
相關推薦：