珠海微信小程序小程序開(kāi)發(fā)路上踩過(guò)的坑
小程序?yàn)殚_(kāi)發(fā)者提供了什么
小程序提供了一個(gè)框架，微信稱之為mina，這個(gè)框架主要分兩個(gè)層面，視圖層和邏輯層�？蚣艿暮诵氖且粋�(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data，這個(gè)數(shù)據(jù)綁定是單向的，只有數(shù)據(jù)發(fā)生變化，視圖才會(huì)做出相應(yīng)的調(diào)整。這種模式，讓開(kāi)發(fā)者專注于事件處理上，改變對(duì)象狀態(tài)，實(shí)現(xiàn)視圖更新。
為了方便以及限制開(kāi)發(fā)者開(kāi)發(fā)，微信自己定義了一系列的基礎(chǔ)組件，就是視圖層的組成單元（表單組件，媒體組件，導(dǎo)航等），組件自帶一些功能與微信風(fēng)格的樣式，類似html標(biāo)簽。微信還提供了很多原生的微信api,用來(lái)調(diào)用微信內(nèi)部提供的功能，以及一個(gè)微信小程序開(kāi)發(fā)者工具。
珠海微信小程序源碼結(jié)構(gòu)
視圖層（將邏輯層的數(shù)據(jù)展現(xiàn)在視圖上）
邏輯層（通過(guò)改變數(shù)據(jù)[setData方法]來(lái)改變視圖）
配置文件
在小程序中，微信規(guī)定了界面的組成模式，由四個(gè)文件組成。
.wxml文件（頁(yè)面結(jié)構(gòu)文件）標(biāo)簽語(yǔ)言，類似html，真正負(fù)責(zé)頁(yè)面結(jié)構(gòu)的文件，可以綁定數(shù)據(jù)。
.wxss文件（樣式表文件）類似css，大部分css樣式都相同
.js文件（腳本文件）用來(lái)運(yùn)行我們的邏輯，使用js語(yǔ)言
.json文件（配置文件）主要配置公用的樣式，比如tab欄，窗口樣式等
知識(shí)庫(kù)珠海微信小程序的例子
CSDN小程序開(kāi)發(fā)初步嘗試，關(guān)注的重點(diǎn)是js文件和wxml文件。
知識(shí)庫(kù)把開(kāi)發(fā)領(lǐng)域細(xì)分成某個(gè)領(lǐng)域，例如技術(shù)語(yǔ)言，運(yùn)維系統(tǒng)，行業(yè)應(yīng)用等方面，對(duì)每個(gè)技術(shù)和知識(shí)點(diǎn)都設(shè)計(jì)一個(gè)網(wǎng)狀圖譜，來(lái)總結(jié)技術(shù)某一方面涉及到的知識(shí)，同時(shí)為知識(shí)結(jié)構(gòu)準(zhǔn)備一些精品的內(nèi)容。方便大家更系統(tǒng)的學(xué)習(xí)知識(shí)。
在知識(shí)庫(kù)這個(gè)產(chǎn)品上，需要實(shí)現(xiàn)內(nèi)容推薦，個(gè)人中心以及搜索。用戶側(cè)和內(nèi)容推薦測(cè)，都包括四層：庫(kù)-》知識(shí)結(jié)構(gòu)-》內(nèi)容列表-》內(nèi)容詳情頁(yè)。搜索功能可以根據(jù)用戶搜索的關(guān)鍵詞找到用戶側(cè)或者推薦里的相關(guān)內(nèi)容。方便用戶閱讀和收藏。
知識(shí)庫(kù)頁(yè)面設(shè)計(jì)
小程序組件滿足了所有的顯示功能和結(jié)構(gòu)（列表，窗口，按鈕，事件）
API齊全，便于邏輯開(kāi)發(fā)。不同的功能模塊放在不同的頁(yè)面里。
- 視圖層： tab欄，列表頁(yè)，知識(shí)結(jié)構(gòu)頁(yè)，內(nèi)容詳情頁(yè)，搜索頁(yè)
- 邏輯層：
tab欄->通過(guò)綁定數(shù)據(jù)index選擇一級(jí)頁(yè)面
列表頁(yè)->通過(guò)改變綁定數(shù)據(jù)contentlist數(shù)組，控制列表顯示和動(dòng)態(tài)加載
搜索頁(yè)->通過(guò)綁定數(shù)據(jù)searchValue，通過(guò)事件及時(shí)獲取用戶輸入
小程序開(kāi)發(fā)路上踩過(guò)的坑
打開(kāi)頁(yè)面數(shù)量限制（redirectTo還是navigateTo）
微信提供tab欄的設(shè)置，可以在app.json中配置，在app里配置的tab欄將出現(xiàn)在所有的一級(jí)頁(yè)面。但是他有一個(gè)問(wèn)題就是第一次點(diǎn)擊tab將會(huì)打開(kāi)一個(gè)新的頁(yè)面，微信對(duì)打開(kāi)頁(yè)面的數(shù)量限制是五個(gè)。
微信提供了幾個(gè)頁(yè)面跳轉(zhuǎn)的方式，redirectto,navigateto，還有返回。重點(diǎn)說(shuō)這兩個(gè)，redirectto會(huì)直接在原頁(yè)面上打開(kāi)新頁(yè)面，navigateto會(huì)新開(kāi)啟一個(gè)頁(yè)面。由于微信在頁(yè)面數(shù)量上有限制，我們產(chǎn)品的層級(jí)有比較多，導(dǎo)致我們無(wú)法直接在app.json設(shè)置tab欄。所以我們把tab欄單獨(dú)設(shè)計(jì)出來(lái)。點(diǎn)擊tab不開(kāi)啟新頁(yè)面。在每個(gè)初級(jí)頁(yè)面都引用進(jìn)去，之后二級(jí)三級(jí)的頁(yè)面上不使用tab切換，而是需要返回到初級(jí)頁(yè)面。
樹(shù)狀結(jié)構(gòu)的展示
每一個(gè)庫(kù)都有一個(gè)樹(shù)狀的知識(shí)結(jié)構(gòu)，大家請(qǐng)看這個(gè)例子。每個(gè)層級(jí)展示的方式是一樣的，所以正常情況下，我們都會(huì)選用遞歸的方式來(lái)使展示。比如在這張圖里，當(dāng)我們判斷這個(gè)節(jié)點(diǎn)擁有子節(jié)點(diǎn)，就想再次調(diào)用同樣方法顯示。但是很遺憾，小程序里，不論是使用模板，還是使用include的方式引用文件，都沒(méi)有辦法做到自己調(diào)自己。
幸運(yùn)的是我們知道我們層級(jí)最深有多少，這樣我就可以寫幾個(gè)同樣的文件和模板，加上不同的命名，來(lái)調(diào)用。如果是未知層級(jí)的樹(shù)狀結(jié)構(gòu)，就會(huì)非常難以處理。在這里可以建議大家將樹(shù)狀結(jié)構(gòu)變成數(shù)組的形式，加上層級(jí)標(biāo)識(shí)，在wxml文件中可以使用循環(huán)的方式來(lái)處理層級(jí)的顯示。
Html頁(yè)面在微信小程序中展示
這是一個(gè)非常難處理的問(wèn)題，微信不支持html頁(yè)面的展示，所以需要把所有html的標(biāo)簽轉(zhuǎn)化成小程序內(nèi)允許的標(biāo)簽。我們使用了一個(gè)名叫wxParse的應(yīng)用，這個(gè)應(yīng)用的功能就是通過(guò)正則表達(dá)式將html頁(yè)面轉(zhuǎn)化成json形式，再用模板的方式展現(xiàn)出來(lái)。在這里面規(guī)定了各個(gè)標(biāo)簽的樣式（wxss）。遺憾的是他也有層級(jí)方面的問(wèn)題，同樣是重復(fù)寫了很多完全一樣的模板。
順序調(diào)用。如果html的標(biāo)簽層級(jí)結(jié)構(gòu)超出了模板個(gè)數(shù)，那么超出部分將無(wú)法顯示出來(lái)。這個(gè)應(yīng)用是在微信中運(yùn)行的，建議大家把數(shù)據(jù)轉(zhuǎn)化放在服務(wù)器端來(lái)進(jìn)行，將轉(zhuǎn)換后的數(shù)據(jù)發(fā)給小程序。另外小程序setData()一次不能超過(guò)1024k,如果你的json格式數(shù)據(jù)超過(guò)這個(gè)限制，就會(huì)很難再拼接。
珠海微信小程序冒泡事件
一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞，網(wǎng)絡(luò)請(qǐng)求接口 wx.request() 沒(méi)有攜帶 Cookies，如果服務(wù)器端有通過(guò)獲取cookies處理的邏輯沒(méi)辦法和小程序結(jié)合，只能為小程序單獨(dú)開(kāi)發(fā)新的接口。
珠海微信小程序在運(yùn)營(yíng)上的優(yōu)勢(shì)在于微信用戶量大，適合推廣，某些功能單一的APP可以在小程序中實(shí)現(xiàn)，不用再下載APP。開(kāi)發(fā)者不用考慮平臺(tái)，開(kāi)發(fā)成本低。但同時(shí)不適合開(kāi)發(fā)邏輯復(fù)雜界面豐富的程序，受到框架限制，隨意性小，無(wú)法滿足所有功能。
