微信小程序

說(shuō)到引爆2017的前端話題，“微信小程序”當(dāng)之無(wú)愧。微信小程序有著可以不需要下載安裝、可以快捷傳播和獲取、出色使用體驗(yàn)的特點(diǎn)，被騰訊寄于連接用戶與服務(wù)，實(shí)現(xiàn)應(yīng)用“觸手可及”的夢(mèng)想的希望。

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

走進(jìn)小程序

1.小程序的技術(shù)棧

我們已經(jīng)了解了小程序的產(chǎn)品定位，再看看小程序技術(shù)層面的問(wèn)題。為了開(kāi)發(fā)小程序，小程序?qū)V大開(kāi)發(fā)者提供了WXML，WXSS和高度封裝的WXAPI。

WXML(WeiXin Markup Language)是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

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

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

同時(shí)，框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)。

什么是基礎(chǔ)組件：

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

組件自帶一些功能與微信風(fēng)格的樣式。

一個(gè)組件通常包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。

比如說(shuō)微信提供了視圖容器，可滾動(dòng)視圖區(qū)域，滑塊視圖容器，將原本開(kāi)發(fā)者熟悉的HTML標(biāo)簽做了封裝，直接用標(biāo)簽可以實(shí)現(xiàn)以前需要引入插件才能實(shí)現(xiàn)的滾動(dòng)或滑塊功能。這類高度封裝的標(biāo)簽還有滾動(dòng)選擇器，可以用一個(gè)標(biāo)簽實(shí)現(xiàn)普通選擇器，時(shí)間選擇器，日期選擇器。可謂是十分的方便快捷。

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

2.小程序的開(kāi)發(fā)設(shè)置

對(duì)于小程序開(kāi)發(fā)者，首先要做的是拿到管理員帳號(hào)，添加開(kāi)發(fā)者白名單。然后在開(kāi)發(fā)設(shè)置頁(yè)面查看AppID和AppSecret，配置服務(wù)器域名。第三步下載開(kāi)發(fā)者工具進(jìn)行代碼的開(kāi)發(fā)和上傳。

小程序開(kāi)發(fā)工具，嚴(yán)格規(guī)范開(kāi)發(fā)者，每一步都需要掃碼驗(yàn)證。同時(shí)小程序只支持https請(qǐng)求。

外賣小程序技術(shù)架構(gòu)

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

app.js —— 小程序邏輯

app.json ——小程序公共設(shè)置。(我們可以對(duì)微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。)

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

小程序的邏輯結(jié)構(gòu)被微信分為了兩個(gè)層。他們是這樣描述的：

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。

這和我們當(dāng)前使用的MVVM框架vue類似。但是不完全一樣，小程序提供的框架嚴(yán)格禁止對(duì)dom的操作。

而外賣這邊在構(gòu)建小程序技術(shù)框架的時(shí)候加入了業(yè)務(wù)，技術(shù)架構(gòu)如下：

pages— —外賣頁(yè)面page

components— —可以組成頁(yè)面page的通用代碼塊

assets— —外賣頁(yè)面引入的靜態(tài)資源庫(kù)

business— —外賣業(yè)務(wù)公共邏輯

utils— —外賣業(yè)務(wù)需要的工具集

adapter— —統(tǒng)一提供向下微信WXAPI訪問(wèn)

service— —統(tǒng)一提供向上服務(wù)端接口訪問(wèn)

mock— —統(tǒng)一提供本地的數(shù)據(jù)模擬

探索一之生命周期

1.小程序的生命周期

微信統(tǒng)一提供一個(gè)App()函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。

對(duì)于小程序的生命周期，只有“onLaunch——onShow——onHide”三個(gè)階段。當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow，當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide。在任意階段小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息。

小程序的銷毀時(shí)機(jī)：

當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開(kāi)微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái);當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。

2.頁(yè)面的生命周期

Page()函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

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

探索二之登錄

小程序中的登錄接口(wx.login)只返回了一個(gè)登錄憑證(code)，需要后端請(qǐng)求一個(gè)微信提供的接口，換取用戶登錄態(tài)信息，包括用戶的唯一標(biāo)識(shí)(openid)及本次登錄的會(huì)話密鑰(session_key)。用戶數(shù)據(jù)的加解密通訊需要依賴會(huì)話密鑰完成。wx.login的調(diào)用會(huì)發(fā)起一次權(quán)限請(qǐng)求彈窗，用戶允許登錄后，回調(diào)內(nèi)容會(huì)帶上 code(有效期五分鐘)。

當(dāng)我們通過(guò)接口拿到登錄憑證code提交給后端，后端生成一個(gè)3rd_session，前端將3rd_session存到本地，以便以后每次請(qǐng)求都帶上用于標(biāo)示唯一用戶，支付，反作弊等驗(yàn)證。具體的交互圖如下：

通過(guò)wx.login()獲取到用戶登錄態(tài)之后，需要維護(hù)登錄態(tài)。開(kāi)發(fā)者要注意不應(yīng)該直接把 session_key、openid 等字段作為用戶的標(biāo)識(shí)或者 session 的標(biāo)識(shí)，而應(yīng)該自己派發(fā)一個(gè) session 登錄態(tài)(請(qǐng)參考登錄時(shí)序圖)。對(duì)于開(kāi)發(fā)者自己生成的 session，應(yīng)該保證其安全性且不應(yīng)該設(shè)置較長(zhǎng)的過(guò)期時(shí)間。session 派發(fā)到小程序客戶端之后，可將其存儲(chǔ)在 storage ，用于后續(xù)通信使用。

總結(jié)

綜上所述，小程序技術(shù)對(duì)于有一定基礎(chǔ)的前端開(kāi)發(fā)者而言是非常的易于上手，同時(shí)微信平臺(tái)高度精準(zhǔn)的封裝也預(yù)示著小程序的開(kāi)發(fā)門檻更低，開(kāi)發(fā)效率更高。我們?cè)谑褂眯〕绦蚍奖憧旖莸募夹g(shù)的同時(shí)，對(duì)于這類平臺(tái)我們有很多可以學(xué)習(xí)的地方。這個(gè)類平臺(tái)不是第一次出現(xiàn)，早在2015年百度糯米也在做類似的平臺(tái)，以快速迭代和各業(yè)務(wù)開(kāi)發(fā)解藕著名。糯米外賣就是其中一例。該平臺(tái)提供了各種封裝好的原生能力供開(kāi)發(fā)者使用。微信平臺(tái)上線前的開(kāi)發(fā)語(yǔ)言封裝，開(kāi)發(fā)工具的提供做的很好。糯米平臺(tái)做的較好的部分是上線方便快捷，以及線上監(jiān)控和數(shù)據(jù)收集非常的完善。同時(shí)微信對(duì)瀏覽器內(nèi)核改造來(lái)支持新的模版語(yǔ)言，這點(diǎn)也是做的非常的深入。總之希望后續(xù)小程序有更多新能力的提供，給各位開(kāi)發(fā)者帶來(lái)更多的挑戰(zhàn)!