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