目前學(xué)習(xí)小程序更多的是看看能否二次封裝其它組件，利于以后能快速開發(fā)各種小程序應(yīng)用。目前發(fā)現(xiàn)picker的selector模式只有一級下拉，那么我們是否可以通過3個picker來實(shí)現(xiàn)三級聯(lián)動模板的形式來引入其它頁面中呢？答案是肯定可以的。那么我的思路是這樣的：

1、使用template模板語法進(jìn)行封裝，數(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: ['北京市', '天津市'...]}】，這個格式是固定的，需要服務(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ī)范的】