微信小程序

說到引爆2017的前端話題，“微信小程序”當之無愧。微信小程序有著可以不需要下載安裝、可以快捷傳播和獲取、出色使用體驗的特點，被騰訊寄于連接用戶與服務，實現應用“觸手可及”的夢想的希望。

從技術的角度看，其本質是一款基于微信的web離線包，微信開放平臺提供了各式各樣的動畫和API，使得小程序的界面和過渡動畫也更加美觀、原生。用戶在小程序里即用即走，不用考慮內存，硬件容量等問題，適合廣大低頻APP。

走進小程序

1.小程序的技術棧

我們已經了解了小程序的產品定位，再看看小程序技術層面的問題。為了開發小程序，小程序對廣大開發者提供了WXML，WXSS和高度封裝的WXAPI。

WXML(WeiXin Markup Language)是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。

WXSS(WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應該怎么顯示。

WXAPI是微信原生 API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。

同時，框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。

什么是基礎組件：

組件是視圖層的基本組成單元。

組件自帶一些功能與微信風格的樣式。

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

比如說微信提供了視圖容器，可滾動視圖區域，滑塊視圖容器，將原本開發者熟悉的HTML標簽做了封裝，直接用標簽可以實現以前需要引入插件才能實現的滾動或滑塊功能。這類高度封裝的標簽還有滾動選擇器，可以用一個標簽實現普通選擇器，時間選擇器，日期選擇器?？芍^是十分的方便快捷。

在JS封裝方面，由于框架并非運行在瀏覽器中，所以JavaScript 在 web 中一些能力都無法使用，如 document，window 等。微信的技術架構讓我們不再需要直接調用這些習以為常的瀏覽器對象，用他們的一套技術方案就可以方便快捷的實現原本復雜的邏輯。他們將所有的瀏覽器對象隱藏，只對開發者提供一個名為wx的對象，提供了全面的諸如網絡、媒體播放、文件上傳、數據緩存、位置、設備信息、界面交互、登錄、支付、模版消息等能力。沒有了cookie的使用，本地緩存相關只能用wx.setStorage(wx.setStorageSync)等api可以對本地緩存進行設置、獲取和清理。本地緩存最大為10MB。且localStorage 是永久存儲的。

2.小程序的開發設置

對于小程序開發者，首先要做的是拿到管理員帳號，添加開發者白名單。然后在開發設置頁面查看AppID和AppSecret，配置服務器域名。第三步下載開發者工具進行代碼的開發和上傳。

小程序開發工具，嚴格規范開發者，每一步都需要掃碼驗證。同時小程序只支持https請求。

外賣小程序技術架構

按照小程序官方建議的代碼框架，小程序的文件結構包含一個描述整體程序的 app 和多個描述各自頁面的 page。

app.js —— 小程序邏輯

app.json ——小程序公共設置。(我們可以對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。)

app.wxss —— 小程序公共樣式表

小程序的邏輯結構被微信分為了兩個層。他們是這樣描述的：

邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋。

這和我們當前使用的MVVM框架vue類似。但是不完全一樣，小程序提供的框架嚴格禁止對dom的操作。

而外賣這邊在構建小程序技術框架的時候加入了業務，技術架構如下：

pages— —外賣頁面page

components— —可以組成頁面page的通用代碼塊

assets— —外賣頁面引入的靜態資源庫

business— —外賣業務公共邏輯

utils— —外賣業務需要的工具集

adapter— —統一提供向下微信WXAPI訪問

service— —統一提供向上服務端接口訪問

mock— —統一提供本地的數據模擬

探索一之生命周期

1.小程序的生命周期

微信統一提供一個App()函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。

對于小程序的生命周期，只有“onLaunch——onShow——onHide”三個階段。當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow，當小程序從前臺進入后臺，會觸發 onHide。在任意階段小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息。

小程序的銷毀時機：

當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺;當再次進入微信或再次打開小程序，又會從后臺進入前臺。

只有當小程序進入后臺一定時間，或者系統資源占用過高，才會被真正的銷毀。

2.頁面的生命周期

Page()函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。

小程序頁面的生命周期有“onLoad——onShow——onReady——onHide——onUnload”五個階段。頁面加載的時候會觸發onLoad和onShow，頁面初次渲染完成會觸發onReady，打開新頁或切換tab的時候會觸發onHide，本頁打開新頁或者返回上一頁觸發onUnload。

探索二之登錄

小程序中的登錄接口(wx.login)只返回了一個登錄憑證(code)，需要后端請求一個微信提供的接口，換取用戶登錄態信息，包括用戶的唯一標識(openid)及本次登錄的會話密鑰(session_key)。用戶數據的加解密通訊需要依賴會話密鑰完成。wx.login的調用會發起一次權限請求彈窗，用戶允許登錄后，回調內容會帶上 code(有效期五分鐘)。

當我們通過接口拿到登錄憑證code提交給后端，后端生成一個3rd_session，前端將3rd_session存到本地，以便以后每次請求都帶上用于標示唯一用戶，支付，反作弊等驗證。具體的交互圖如下：

通過wx.login()獲取到用戶登錄態之后，需要維護登錄態。開發者要注意不應該直接把 session_key、openid 等字段作為用戶的標識或者 session 的標識，而應該自己派發一個 session 登錄態(請參考登錄時序圖)。對于開發者自己生成的 session，應該保證其安全性且不應該設置較長的過期時間。session 派發到小程序客戶端之后，可將其存儲在 storage ，用于后續通信使用。

總結

綜上所述，小程序技術對于有一定基礎的前端開發者而言是非常的易于上手，同時微信平臺高度精準的封裝也預示著小程序的開發門檻更低，開發效率更高。我們在使用小程序方便快捷的技術的同時，對于這類平臺我們有很多可以學習的地方。這個類平臺不是第一次出現，早在2015年百度糯米也在做類似的平臺，以快速迭代和各業務開發解藕著名。糯米外賣就是其中一例。該平臺提供了各種封裝好的原生能力供開發者使用。微信平臺上線前的開發語言封裝，開發工具的提供做的很好。糯米平臺做的較好的部分是上線方便快捷，以及線上監控和數據收集非常的完善。同時微信對瀏覽器內核改造來支持新的模版語言，這點也是做的非常的深入。總之希望后續小程序有更多新能力的提供，給各位開發者帶來更多的挑戰!