微信小程序學習：使用picker封裝省市區(qū)三級聯(lián)動模板
目前學習小程序更多的是看看能否二次封裝其它組件，利于以后能快速開發(fā)各種小程序應用。目前發(fā)現(xiàn)picker的selector模式只有一級下拉，那么我們是否可以通過3個picker來實現(xiàn)三級聯(lián)動模板的形式來引入其它頁面中呢？答案是肯定可以的。那么我的思路是這樣的：
1、使用template模板語法進行封裝，數(shù)據(jù)從頁面?zhèn)魅?/p>
2、根據(jù)picker組件的語法，range只能是一組中文地區(qū)數(shù)組，但是我們需要每個地區(qū)的唯一碼來觸發(fā)下一級聯(lián)動數(shù)據(jù)。這樣，我的做法是通過一個對象里面的兩組數(shù)據(jù)分表存儲中文名和唯一碼的兩個對象數(shù)組。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】，這個格式是固定的，需要服務端配合返回
3、通過picker的bindchange事件來獲取下一級的數(shù)據(jù)，每個方法都寫入函數(shù)中在暴露出來供頁面調用
然后講下我demo的目錄結構：
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搭建了簡單的服務端供測試。不要問我服務端的為啥是這樣的，我也不懂，剛入門我只要數(shù)據(jù)...
當然你可以省掉這一步，將數(shù)據(jù)直接固定在demo.js里面進行測試...
代碼如下：【服務端的返回數(shù)據(jù)格式是遵循了下面的retArr的規(guī)范的】
- <?php
- header("Content-type: text/html; charset=utf-8");
- $type=$_REQUEST["type"];//獲取省市區(qū)的標志
- $fcode=$_GET["fcode"];
- $retArr=[
- "status"=>true,
- "data"=>[],
- "msg"=>""
- ];&
