淺析觸手可及的微信小程式

 概述

眾所周知，網際網路行業從來都是“唯快不破”。自2016年9月21日微信小程式正式開啟內測，在微信生態下，觸手可及、用完即走的微信小程式引起廣泛關注，本文從以下幾個方面淺談一番微信小程式。

生命週期

為了使開發更為便捷，許多主流前端技術棧都有著各自的鉤子函式，如React,Vue等。小程式亦如此，有一套清晰易懂的生命週期函式。如圖所示：

onLaunch：當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）。

onLoad：小程式頁面載入時觸發，一個頁面只會呼叫一次，可以獲取wx.navigateTo和wx.redirectTo及中的 query。

onShow：當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow。

onHide：和onShow函式對應，當小程式從前臺進入後臺，會觸發 onHide。

onReady：一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。

onUnload：當redirectTo或navigateBack的時候呼叫。

除以上常規的生命週期函式之外，還有頁面相關事件處理函式，如：

onError：當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊。

onPullDownRefresh：監聽使用者下拉動作。

onReachBottom：頁面上拉觸底事件的處理函式。

onShareAppMessage：使用者點選右上角分享。

這些宣告周期函式和相關事件處理函式即是小程式的靈魂，開發者可以根據場景方便的呼叫。

元件及API

元件是檢視層的基本組成單元，它會自帶一些功能與微信風格的樣式。小程式框架為開發者提供了一系列基礎元件，開發者可以通過組合這些基礎元件進行快速開發。

一個元件通常包括開始標籤和結束標籤，屬性用來修飾這個元件，內容在兩個標籤之內。

相對於H5標籤來講，小程式的元件顯得更為靈活，功能也更為明瞭，如檢視容器、表單元件、媒體元件等，這裡不妨舉一示例，如image元件：

image元件有一個mode屬性，用來定義圖片裁剪、縮放的模式。mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。開發者可根據需求選擇需要的模式。

另外，需要注意的是：

（1）其中元件與屬性都是小寫，如需分隔以連字元-連線。

（2）小程式的有些元件與屬性是在某個基礎庫才開始支援的，低版本需做相容處理。

如果說元件是小程式的“骨架”，那麼API就是小程式的“靈魂”。框架提供豐富的微信原生API，可以方便的調起微信提供的能力，如獲取使用者資訊，本地儲存，支付功能等。

同時，需要注意的是：

（1）小程式也在不斷更新完善，有些介面已經（即將）廢棄，請繞行避免雷區，如“大名鼎鼎”的getUserInfo介面，使用該介面將不再出現授權彈窗，當使用者未授權過，呼叫該介面將直接報錯，當使用者授權過，可以使用該介面獲取使用者資訊；

（2）關於小程式分享功能，為了進一步提升使用者的體驗感，創造良好自主分享氛圍，減少“強制分享至不同群”等濫用分享能力，微信官方對小程式，甚至網頁及App都做出了具體的調整，開發者將無法獲知使用者是否完成分享，更不會在分享完後立即獲得群ID等。

（3）小程式的有些API是在某個基礎庫才開始支援的，低版本需做相容處理。

外掛

隨著小程式功能的逐漸擴充套件，官方提供了小程式的外掛功能。外掛是對一組 js 介面、自定義元件或頁面的封裝，用於嵌入到小程式中使用。

1.開發外掛

首先需要在開發者工具建立外掛，如圖所示：

建立生成的預設程式碼結構如下：

新建外掛型別的專案後，專案中將包以下目錄：

miniprogram 目錄內容可以當成普通小程式來編寫，用於外掛除錯、預覽和稽核。plugin即是外掛程式碼目錄：

2.使用外掛

使用外掛之前，需要在小程式管理後臺的“設定-第三方服務-外掛管理”中新增外掛。然後開發者需要要在 app.json 中宣告需要使用的外掛：

當然，plugins 定義段中可以包含多個外掛宣告，每個外掛宣告以一個使用者自定義的外掛引用名作為標識，並指明外掛的 appid 和需要使用的版本號。

在自定義的元件的 json 檔案定義需要引入的自定義元件時，使用 plugin:// 協議指明外掛的引用名和自定義元件名，例如：

使用外掛的 js 介面時，可以在自定義的元件的 js 檔案中使用 requirePlugin 方法：

需要注意的是：

（1）外掛的頁面從小程式基礎庫版本 2.1.0 開始支援。

（2）外掛不能獨立執行，必須嵌入在其他小程式中才能被使用者使用；而第三方小程式在使用外掛時，也無法看到外掛的程式碼。因此，外掛適合用來封裝自己的功能或服務，提供給第三方小程式進行展示和使用。

分包載入

分包載入是小程式功能的又一重要突破。在構建時打包成不同的分包，使用者在使用時可以實現按需進行載入，優化小程式首次啟動的下載時間，以及在多團隊共同開發時可以更好的解耦協作。

小程式官方提供一個分包載入的DEMO示例專案，可以通過這個示例很好的理解小程式分包載入。 首先看一下DEMO的程式碼結構：

示例對page目錄下的 API 和 component 兩個資料夾下的自定義元件進行了分包載入，其中在 app.json 檔案中分包配置如下：

需要注意的是：

（1）packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內的資源。

（2）目前小程式分包大小有以下限制：

具體分包載入示例請點選這裡https://developers.weixin.qq.com/miniprogram/dev/demo/demo-subpackages.zip

元件化開發框架WePY

WePY 是騰訊開源的一款讓小程式支援元件化開發的框架，通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程式，讓開發小程式專案變得更加簡單，高效。

首先全域性安裝或更新WePY命令列工具：

WePY的程式碼結構如下：

相對小程式原生開發，使用元件化開發框架WePY優勢更為明顯，由於WePY借鑑了Vue.js的語法風格和功能特性，因此更容易上手。通過build指令自動編譯生成的dist目錄結構如下：

關於WePY框架，也可以參考官方入門指南、主要功能特性、程式碼規範等詳細介紹。

遇到過的坑

踩坑讓我們越挫越勇。面對小程式這個新生事物，在開發過程中，難免會遇到這樣那樣的問題，官方文件是最好的參考資料，當然也可以在小程式開發者社群中參與討論或尋找答案。以下是筆者在開發中曾遇到的一些坑：

1.專案設定按需選中（ES6 轉 ES5、上傳程式碼時樣式自動補全、上傳程式碼時自動壓縮等）；

2.預先配置需要的域名資訊，如請求需要配置相關request 合法域名，獲取圖片資訊，如果為網路圖片，需先配置download域名才能生效等。

3.使用元件實現小程式跳轉H5頁面，在iOS中，若存在JSSDK介面呼叫無響應的情況，可在的src後面加個#wechat_redirect解決。

4.有些元件如 video, canvas 是由客戶端建立的原生元件，它的層級是最高的，不能通過 z-index 控制層級。

5.繪製影像到畫布，用drawImage新增的圖片，需要預先獲取圖片的tempFilePath；

6.有些元件和 API 是從某個版本的基礎庫才開始支援，低版本需做相容處理。

7.iPhone X 機型底部樣式留白適配。

8.（即將）廢棄的介面慎用，另外微信對分享功能已做調整，開發者將無法獲知使用者是否完成分享。

9.小程式有程式碼大小限制，大檔案最好使用網路資源或使用分包載入功能。

10.小程式目前頁面路徑最多隻能十層，合理使用navigateTo、redirectTo、navigateBack、reLaunch。