小編給大家分享一下微信小程序中怎么使用picker封裝省市區(qū)三級聯(lián)動,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
站在用戶的角度思考問題,與客戶深入溝通,找到武漢網(wǎng)站設(shè)計與武漢網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋武漢地區(qū)。
微信小程序 使用picker封裝省市區(qū)三級聯(lián)動實例
目前學(xué)習(xí)小程序更多的是看看能否二次封裝其它組件,利于以后能快速開發(fā)各種小程序應(yīng)用。目前發(fā)現(xiàn)picker的selector模式只有一級下拉,那么我們是否可以通過3個picker來實現(xiàn)三級聯(lián)動模板的形式來引入其它頁面中呢?答案是肯定可以的。那么我的思路是這樣的:
1、使用template模板語法進(jìn)行封裝,數(shù)據(jù)從頁面?zhèn)魅?/strong>
2、根據(jù)picker組件的語法,range只能是一組中文地區(qū)數(shù)組,但是我們需要每個地區(qū)的唯一碼來觸發(fā)下一級聯(lián)動數(shù)據(jù)。這樣,我的做法是通過一個對象里面的兩組數(shù)據(jù)分表存儲中文名和唯一碼的兩個對象數(shù)組。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】,這個格式是固定的,需要服務(wù)端配合返回
3、通過picker的bindchange事件來獲取下一級的數(shù)據(jù),每個方法都寫入函數(shù)中在暴露出來供頁面調(diào)用
然后講下我demo的目錄結(jié)構(gòu):
common
-net.js//wx.request請求接口二次整合
-cityTemplate.js//三級聯(lián)動方法
page
-demo
-demo.js
-demo.wxml
template
-cityTemplate.wxml
app.js
app.json
app.wxss
然后,使用phpstudy搭建了簡單的服務(wù)端供測試。不要問我服務(wù)端的為啥是這樣的,我也不懂,剛?cè)腴T我只要數(shù)據(jù)...
當(dāng)然你可以省掉這一步,將數(shù)據(jù)直接固定在demo.js里面進(jìn)行測試...
代碼如下:【服務(wù)端的返回數(shù)據(jù)格式是遵循了下面的retArr的規(guī)范的】
<?php header("Content-type: text/html; charset=utf-8"); $type=$_REQUEST["type"];//獲取省市區(qū)的標(biāo)志 $fcode=$_GET["fcode"]; $retArr=[ "status"=>true, "data"=>[], "msg"=>"" ]; if($type!="province" && $type!="city" && $type!="county"){ $retArr["status"]=false; $retArr["msg"]="獲取地區(qū)類型錯誤,請檢查"; 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=["東城區(qū)", "西城區(qū)", "崇文區(qū)", "宣武區(qū)", "朝陽區(qū)", "豐臺區(qū)", "石景山區(qū)"]; $fcode=$P_fcode; } if($P_fcode=="350100"){ $code=["350102", "350103", "350104"]; $name=["鼓樓區(qū)", "臺江區(qū)", "蒼山區(qū)"]; $fcode=$P_fcode; } if($P_fcode=="350200"){ $code=["350203", "350205", "350206"]; $name=["思明區(qū)", "海滄區(qū)", "湖里區(qū)"]; $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::
<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}}"> --二級市區(qū)-- </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}}"> --三級地區(qū)-- </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>
cityTemplate.js::
/** * 獲取三級聯(lián)動的三個函數(shù) * that: 注冊頁面的this實例 必填 * p_url: 一級省份url 必填 * p_data:一級省份參數(shù) 選填 */ 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 ) { //獲取一級省份數(shù)據(jù) 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 ); //點(diǎn)擊一級picker觸發(fā)事件并獲取市區(qū)方法 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; //點(diǎn)擊二級picker觸發(fā)事件并獲取地區(qū)方法 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; //點(diǎn)擊三級picker觸發(fā)事件 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方法::
/** * 網(wǎng)絡(luò)發(fā)送http請求,默認(rèn)為返回類型為json * * url: 必須,其他參數(shù)非必須 接口地址 * data:請求的參數(shù) Object或String * successFun(dts):成功返回的回調(diào)函數(shù),已自動過濾微信端添加數(shù)據(jù),按接口約定,返回成功后的data數(shù)據(jù),過濾掉msg和status * successErrorFun(msg):成功執(zhí)行請求,但是服務(wù)端認(rèn)為業(yè)務(wù)錯誤,執(zhí)行其他行為,默認(rèn)彈出系統(tǒng)提示信息. * failFun:接口調(diào)用失敗的回調(diào)函數(shù) * completeFun:接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) * header:object,設(shè)置請求的 header , header 中不能設(shè)置 Referer * method:默認(rèn)為 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; //默認(rèn)頭為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; //將微信端結(jié)果過濾,獲取服務(wù)端返回的原樣數(shù)據(jù) var status = returnData.status; //按接口約定,返回status時,才調(diào)用成功函數(shù) //console.log(res); //正常執(zhí)行的業(yè)務(wù)函數(shù) if( status == true ) { if( successFun ) { var dts = returnData.data; successFun( dts );//回調(diào),相當(dāng)于獲取到data后直接在回調(diào)里面處理賦值數(shù)據(jù) } } else if( status == false ) { var msg = returnData.msg; if( !successErrorFun ) { console.log( msg ); } else { successErrorFun( msg ); } } else { console.log( "服務(wù)端沒有按照接口約定格式返回數(shù)據(jù)" ); } } 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::
<import src="../../template/cityTemplate.wxml"/> <template is="city" data="{{...city}}" />
demo.js::
var city = require( '../../common/cityTemplate' ); Page( { data: { }, onLoad: function( options ) { var _that = this; //創(chuàng)建三級聯(lián)動數(shù)據(jù)對象 ---- 這個city對象是固定的,只有請求的url是根據(jù)各自的服務(wù)端地址來更改的 _that.setData( { city: { province: {},//格式province:{code: ["11000", "12000"], name: ["北京市", "上海市"]},只能固定是name和code,因為模板需要根據(jù)這倆參數(shù)顯示 city: {}, county: {}, provinceIndex: 0, cityIndex: 0, countyIndex: 0, cityUrl: "http://localhost:8282/phpserver/areas.php?type=city&fcode=",//type表示獲取地區(qū) fcode是一級code碼,到時具體根據(jù)后端請求參數(shù)修改 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組件的下拉會重疊了,不知道是開發(fā)工具原因,還是還為修改的bug。。。只能等微信方面更新消息給反饋了
看完了這篇文章,相信你對“微信小程序中怎么使用picker封裝省市區(qū)三級聯(lián)動”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
當(dāng)前文章:微信小程序中怎么使用picker封裝省市區(qū)三級聯(lián)動
文章轉(zhuǎn)載:http://bm7419.com/article30/jddopo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、移動網(wǎng)站建設(shè)、建站公司、服務(wù)器托管、網(wǎng)站設(shè)計、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)