【編者按】從內測到開啟公測，微信小程式已然成為了 IT 領域最為火熱的話題，除卻不同型別應用的可能性探索之外，對於開發團隊而言，最多的當屬踩過的那些坑。近一段時間，CSDN 也在為知識庫專案進行小程式開發的初步嘗試，對此，CSDN 高階研發工程師尚琳凱在一次線下活動中分享了知識庫小程式開發的一些經驗，本文為扼要總結。微信小程式的世界還都充滿著未知數，歡迎郵件[email protected]交流分享。

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

什麼是小程式

小程式是微信推出的一種新的公眾號的形態，不需要下載安裝，即可在微信中使用的應用。同時，需要注意的是，小程式、訂閱號、服務號、企業號是並行的體系。

以下為 CSDN 知識庫推出的“

微信小程式 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還是navigateTo）

微信提供 Tab 欄的設定，可以在app.json中配置，在 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 的標籤層級結構超出了模板個數，那麼超出部分將無法顯示出來。這個應用是在微信中執行的，建議大家把資料轉化放在伺服器端來進行，將轉換後的資料發給小程式。另外小程式setData()一次不能超過1024K，如果你的 JSON 格式資料超過這個限制，就會很難再拼接。

4. 冒泡事件

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

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

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

總結

小程式在運營上的優勢在於微信使用者量大，適合推廣，某些功能單一的 App 可以在小程式中實現，不用再下載 App。開發者不用考慮平臺，開發成本低。但同時不適合開發邏輯複雜介面豐富的程式，受到框架限制，隨意性小，無法滿足所有功能。

瞭解最新移動開發相關資訊和技術，請關注 mobilehub 公眾微訊號（ID: mobilehub)。