目前學習小程序(xu)更(geng)多的(de)是(shi)看(kan)看(kan)能(neng)(neng)否二次封裝其它組件，利(li)于以后能(neng)(neng)快速開(kai)發各(ge)種小程序(xu)應用。目前發現picker的(de)selector模(mo)(mo)式(shi)只有一級(ji)下拉，那么(me)我們(men)是(shi)否可以通過3個picker來實現三級(ji)聯動模(mo)(mo)板(ban)的(de)形式(shi)來引入(ru)其它頁面中呢？答案是(shi)肯定可以的(de)。那么(me)我的(de)思路(lu)是(shi)這(zhe)樣的(de)：

1、使用template模(mo)板語法(fa)進行封裝，數據從頁面傳入

2、根據(ju)(ju)picker組(zu)(zu)(zu)件的(de)語法，range只能是(shi)一(yi)組(zu)(zu)(zu)中文地區數(shu)組(zu)(zu)(zu)，但(dan)是(shi)我們需(xu)要每個(ge)(ge)(ge)地區的(de)唯一(yi)碼來觸發下一(yi)級聯動(dong)數(shu)據(ju)(ju)。這樣，我的(de)做法是(shi)通過一(yi)個(ge)(ge)(ge)對(dui)(dui)象里面的(de)兩組(zu)(zu)(zu)數(shu)據(ju)(ju)分表存儲中文名和唯一(yi)碼的(de)兩個(ge)(ge)(ge)對(dui)(dui)象數(shu)組(zu)(zu)(zu)。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】，這個(ge)(ge)(ge)格式是(shi)固定的(de)，需(xu)要服務端配合返回(hui)

3、通過picker的(de)bindchange事件來獲取下(xia)一級的(de)數(shu)據(ju)，每個方法都寫入函數(shu)中在(zai)暴露出來供(gong)頁面調用

然后講下(xia)我demo的目錄(lu)結構：

common

    -net.js//wx.request請(qing)求(qiu)接口二次(ci)整合

    -cityTemplate.js//三級聯動(dong)方法

page

    -demo

        -demo.js

        -demo.wxml

template

    -cityTemplate.wxml

app.js

app.json

app.wxss

然后，使用phpstudy搭建了簡單(dan)的(de)服務端供測試(shi)。不要問我服務端的(de)為啥是這樣(yang)的(de)，我也不懂，剛入門我只要數據...

當然你可以省掉這一步(bu)，將數據直接(jie)固定(ding)在demo.js里面進行測(ce)試(shi)...

代碼如(ru)下：【服(fu)務端的返回數據(ju)格式是遵(zun)循了(le)下面(mian)的retArr的規范的】