微信小程式開發遇到的那些坑

序

從內測到開啟公測，微信小程式已然成為了IT領域最為火熱的話題，除卻不同類型應用的可能性探索之外，對於開發團隊而言，最多的當屬踩過的那些坑洞。

---

小程式為開發者提供了什麼

什麼是小程式

即可在微信中使用的應用。同時，要注意的是，小程式、訂閱號碼、服務號碼、企業號是平行的體系。

以下為php中文網推出的「微信開發」知識圖譜，能夠更好地幫助讀者了解微信小程式在微信開發中的位置。

微信小程式 MINA 框架

小程式提供了一個框架，微信稱之為“MINA”，這個框架主要分兩個層面，視圖層和邏輯層。框架的核心是一個回應的資料綁定係統。 WXML 中的動態數據均來自對應 Page 的 data，這個資料綁定是單向的，只有資料發生變化，視圖才會做出相應的調整。這種模式，讓開發者專注於事件處理上，改變物件狀態，實現視圖更新。

為了方便以及限制開發者開發，微信自己定義了一系列的基礎組件，就是視圖層的組成單元（表單組件、媒體組件、導航等），組件自帶一些功能與微信風格的樣式，類似HTML 標籤。微信也提供了許多的原生API，用來呼叫微信內部提供的功能，以及一個微信小程式開發者工具。

微信小程式來源碼結構：

●視圖層（將邏輯層的資料展現在視圖上）

●邏輯層（透過改變資料[setData方法]改變視圖）

在小程式中，微信規定了介面的組成模式，由四個文件組成：

●.wxml 文件（頁面結構文件）標籤語言，類似HTML，真正負責頁面結構的文件，可以綁定資料；

●.wxss 檔案（樣式表檔案）類似CSS，大部分CSS 樣式都相同；

●.js 檔案（腳本檔案）用來運作我們的邏輯，使用JS 語言；

●.json 檔案（設定文件）主要配置公用的樣式，例如Tab 欄、視窗樣式等。

小程式開發小程式開發的初步嘗試專注於 JS 檔案和 WXML 檔案。
由於把開發領域細分成某個領域，例如技術語言、運維繫統、產業應用等方面，對每個技術和知識點都設計一個網狀圖譜，來總結技術某一方面涉及到的知識，同時為知識結構準備一些精品的內容，方便大家更有系統的學習知識。所以在這個產品上，需要實現內容推薦、個人中心以及搜尋。用戶面和內容推薦都包括四層：庫-》知識結構-》內容列表-》內容詳情頁。搜尋功能可以根據搜尋的關鍵字查找到用戶端或推薦知識庫的相關內容，方便大家閱讀或收藏。

頁面設計小程式元件滿足了所有的顯示功能和結構（清單、視窗、按鈕、事件等），API 齊全，便於邏輯開發。不同的功能模組放在不同的頁面裡，具體表現為：

●視圖層： Tab 欄，列表頁，知識結構頁，內容詳情頁，搜尋頁

●邏輯層：

●Tab 欄- >透過綁定資料index選擇一級頁面；

●列表頁->透過改變綁定資料contentlist數組，控制列表顯示和動態載入；

●搜尋頁->透過綁定資料searchValue，透過事件及時獲取使用者輸入。

---

小程式開發路上踩過的坑
1.開啟頁面數量限制（redirectTo還是navigateToyapp. App 裡配置的Tab 欄會出現在所有的一級頁面。但它有一個問題就是第一次點擊 Tab 將會開啟一個新的頁面，微信對開啟頁面的數量限制是五個。

微信提供了幾個頁面跳躍的方式，redirectto、navigateto，還有返回。重點說這兩個，redirectto會直接在原頁面上開啟新頁面，navigateto會新開啟一個頁面。由於微信在頁面數量有限制，我們產品的層級有比較多，導致無法直接在app.json設置 Tab 欄。所以我們把 Tab 欄單獨設計出來。點選 Tab 不開啟新頁面。在每個初級頁面都引用進去，之後二級三級的頁面上不使用 Tab 切換，而是需要返回初級頁面。

2. 樹狀結構的展示

每一個庫都有一個樹狀的知識結構，大家請看這個例子。每個層級展示的方式都是一樣的，所以正常情況下，我們都會選用遞歸的方式來使展示。例如在這張圖裡，當我們判斷這個節點擁有子節點，就想再呼叫同樣方法顯示。但很遺憾，小程式裡，不論是使用模板，還是使用include的方式引用文件，都沒有辦法做到自己調自己。

幸運的是我們知道層級最深有多少，這樣就可以寫幾個同樣的檔案和模板，加上不同的命名來呼叫。如果是未知層級的樹狀結構，就會非常難以處理。這裡可以建議大家將樹狀結構變成數組的形式，加上層級標識，在 WXML 檔案中可以使用循環的方式來處理層級的顯示。

3. HTML頁面在微信小程式中展示

這是一個非常難處理的問題，微信不支援 HTML 頁面的展示，所以需要把所有 HTML 的標籤轉化成小程式內允許的標籤。我們使用了一個名為wxParse的應用程式，它的功能就是透過正規表示式將 HTML 頁面轉換成 JSON 形式，再用模板的方式展現出來。這裡面前規定了各個標籤的樣式（WXSS）。可惜的是它也有層級方面的問題，同樣是重複寫了很多完全一樣的模板。

HTML轉JSON工具

轉換後的HTML頁

順序呼叫
如果 HTML 的標籤層級結構超出了模板個數，那麼超出部分將無法顯示出來。這個應用程式是在微信中運行的，建議大家把資料轉換放在伺服器端來進行，將轉換後的資料發給小程式。另外小程式setData()一次不能超過1024K，如果你的 JSON 格式資料超過這個限制，就會很難再拼接。

4.冒泡事件

一個元件上的事件被觸發後，該事件會向父節點傳遞，由此引起不必要的邏輯處理，對此，使用費冒泡事件處理。

5.網路請求介面wx.request()沒有攜帶 Cookies

如果伺服器端有透過取得 Cookies 處理的邏輯沒辦法和小程式結合，只能為小程式單獨開發新的介面。

微信發起網絡請求API

---

總結
小程式在營運量上的優點實現，不用再下載App。開發者不用考慮平台，開發成本低。但同時不適合開發邏輯複雜介面豐富的程序，受到框架限制，隨意性小，無法滿足所有功能。