從微信的誕生，到微信公眾號(hào)、微信支付，再到小程序，騰訊生態(tài)在一次又一次影響用戶行為習(xí)慣的同時(shí)，也為開發(fā)者提供了新的思路和技能發(fā)展方向。無可置疑，微信小程序開發(fā)浪潮已經(jīng)來臨，也將在 2018年成為各行業(yè)流量紅利的集中爆發(fā)入口。

4月 28日，騰訊云舉辦的云 +社區(qū)技術(shù)沙龍，以小程序開發(fā)實(shí)戰(zhàn)為基準(zhǔn)點(diǎn)，圍繞小程序云上解決方案，serverless后端架構(gòu)，小游戲底層設(shè)計(jì)和直播、電商小程序的開發(fā)實(shí)戰(zhàn)五大主題內(nèi)容，分享最全面的微信小程序設(shè)計(jì)開發(fā)思路以及解決方案。本文整理了講師演講精彩內(nèi)容.

1小程序云端解決方案

小程序不需要安裝，易于分享與傳播、開發(fā)容易同時(shí)用戶體驗(yàn)也非常好，那么，他的這些特性是如何實(shí)現(xiàn)的呢？騰訊云高級(jí)工程師朱展，從小程序架構(gòu)分析、小程序解決方案進(jìn)化歷程以及騰訊云小程序解決方案介紹三方面給出了答案。

小程序的實(shí)現(xiàn)原理

小程序的開發(fā)模式是一種類 Web的模式，它的前端和一般的 H5的前端相似，但和 JavaScrpit開發(fā)比起來的會(huì)簡單很多，這點(diǎn)得益于小程序的實(shí)現(xiàn)原理和架構(gòu)。下圖是程序的基本架構(gòu)圖，它的上層分兩個(gè)板塊，一塊是視圖層，也是 WebViews，另一塊是邏輯層，也就是 AppService，這兩層在兩個(gè)不同的線里面進(jìn)行處理，跟傳統(tǒng)的 web有根本性的差異。

傳統(tǒng)的 Web渲染時(shí)，如果邏輯里面有很復(fù)雜的處理，往往會(huì)導(dǎo)致界面出現(xiàn)卡頓的現(xiàn)象。小程序沒有這個(gè)問題，如果沒有調(diào)用渲染，不會(huì)導(dǎo)致界面的流程度下降。不過，由于視圖層和邏輯層在不同的線程里面，這兩層不能進(jìn)行直接的交互，必須通過一些手段實(shí)現(xiàn)交互，微信采用 JSBridge實(shí)現(xiàn) JS的運(yùn)行環(huán)境和原生系統(tǒng)的相互調(diào)用，當(dāng)用戶在界面上進(jìn)行操作時(shí)候，會(huì)觸發(fā)相關(guān)事件，傳遞到原生 Webviews，再到邏輯層。

下圖是小程序的渲染流程圖，編譯打包的階段，編寫小程序時(shí)需先編寫一個(gè) WXML的代碼，通過 WCC的編譯工具，進(jìn)入 WAWebView，用戶運(yùn)行小程序時(shí)，會(huì)和邏輯層傳入的數(shù)據(jù)做一個(gè)編譯，渲染成最終的界面，下圖是一個(gè)局部更新的過程。

以下是小程序加載的幾種簡單的示意圖，小程序在手機(jī)加載時(shí)，要在 CDN上面拉一個(gè)小程序包，小程序在首次加載時(shí)可能有一個(gè)等待的時(shí)間，當(dāng)這次安裝包緩存到本地以后，下次手機(jī)再打開該小程序，則直接從緩存里面讀取安裝包的內(nèi)容，如果有新的版本，小程序也不會(huì)等新版本更新完了再打開 APP，而是直接用上一層緩存的小程序，等下再啟動(dòng)時(shí)，直接使用新的安裝包替換舊的。

同時(shí)，小程序還提供了一個(gè) Webview預(yù)加載的性能，除了當(dāng)前看到的 Webview的視圖以外，在后臺(tái)還可以看到一個(gè)新的 Webview，這種預(yù)加載性能，能夠讓一些復(fù)雜的小程序在一定程度上保證加載的速度。

小程序的安裝包緩存、分包加載、獨(dú)立渲染線程、Webview 預(yù)加載以及一些 Native 組件……這些工作在讓小程序擁有豐富功能的同時(shí)，保證了小程序的打開速度和流暢度，從而給用戶帶來完美的體驗(yàn)。

小程序解決方案進(jìn)化歷程

開發(fā)者在開發(fā)一款小程序時(shí)，需要處理很多非業(yè)務(wù)性的邏輯，同時(shí)需要準(zhǔn)備自己的服務(wù)器，因此需要花費(fèi)很多精力在服務(wù)器運(yùn)維以及周圍環(huán)境的部署上，而無法專注于小程序的業(yè)務(wù)開發(fā)。為了讓開發(fā)者從繁瑣的配置上解放出來，騰訊云為企業(yè)和機(jī)構(gòu)定制了一套基于騰訊云 IaaS 能力的解決方案，這就是騰訊云微信小程序 Wafer 解決方案，幫助開發(fā)者更加便捷的部署和調(diào)試服務(wù)器。

Wafer1 面向企業(yè)和機(jī)構(gòu)客戶（以下稱為企業(yè)級(jí)客戶），提供了一臺(tái)業(yè)務(wù)服務(wù)器和一臺(tái)會(huì)話服務(wù)器，業(yè)務(wù)服務(wù)器來部署和處理業(yè)務(wù)相關(guān)的邏輯，而會(huì)話服務(wù)器則用來獨(dú)立處理與用戶會(huì)話（登錄注冊(cè)等）相關(guān)的邏輯，業(yè)務(wù)與會(huì)話的分離有助于中大型企業(yè)級(jí)客戶將來對(duì)小程序后臺(tái)進(jìn)行擴(kuò)展。除此之外，騰訊云還將數(shù)據(jù)庫從云服務(wù)器中抽離出來，提供了云數(shù)據(jù)庫。

除了 IaaS 能力的解決方案 wafer ，騰訊云還提供了快速通信接口、登錄、語音識(shí)別等多種能力，用以滿足用戶在小程序開發(fā)過程中的各項(xiàng)功能需求。

Wafer 的信道服務(wù)是由騰訊云提供的一個(gè) PaaS 級(jí)的 websocket 服務(wù)。利用信道通信技術(shù)，可以實(shí)現(xiàn)小程序與服務(wù)器之間的信息互動(dòng)和傳輸。騰訊云信道通信技術(shù)可以使當(dāng)前的用戶直接跟信道服務(wù)器直接建立 websocket 鏈接，業(yè)務(wù)服務(wù)器只用處理 http 請(qǐng)求而不需要關(guān)心 websocket 信息。

總的來說，Wafer信道服務(wù)有以下幾大特點(diǎn)：配合 SDK無需開發(fā)，直接使用；平臺(tái)提供穩(wěn)定性和性能保障；能夠自動(dòng)實(shí)現(xiàn)斷線重連；獨(dú)立信用服務(wù)器，消息搬運(yùn)工。但同時(shí)，Wafer1架構(gòu)復(fù)雜，開發(fā)者上手成本高，開發(fā)者代碼調(diào)試也不方便。

針對(duì) wafer1不足之處，2017年上半年提出 wafer2的解決方案，它是 wafer1是一個(gè)簡化版，把 wafer1做一些簡化合并，兼顧的安全性和便利性，比如說它把會(huì)話服務(wù)器和業(yè)務(wù)服務(wù)器做一個(gè)合并；在 wafer1時(shí)代我們會(huì)讓用戶自行部署他的服務(wù)器，在這兒我們進(jìn)行托管式的管理，用戶可以購買自己的服務(wù)器，但是不需要做服務(wù)器端的配置，還會(huì)自動(dòng)免費(fèi)部署 SSL證書，此外，騰訊云和微信進(jìn)行深度的合作，已經(jīng)將 wafer2的解決方案提進(jìn)微信開發(fā)者空間里面去了。

除了 IaaS 能力的解決方案 wafer ，騰訊云還提供了上傳代碼到開發(fā)環(huán)境、使用 Devtools 啟動(dòng)單步調(diào)試、在開發(fā)環(huán)境安裝依賴、重啟 /停止 Node.js 程序、恢復(fù)初始狀態(tài)、上傳生產(chǎn)環(huán)境代碼、帶登錄態(tài)跳轉(zhuǎn)騰訊云控制臺(tái)等系列解決方案，本文不在此一一贅述，感興趣的同學(xué)可以登錄騰訊云官網(wǎng)進(jìn)行嘗試。

2使用 Serverless 構(gòu)建小程序后臺(tái)

小程序、小游戲的開發(fā)已經(jīng)越來越火爆，而小程序或者小游戲的后臺(tái)，通常還是按照傳統(tǒng)的服務(wù)器模式，提供 API 作為后端服務(wù)入口進(jìn)行開發(fā)。騰訊云正在嘗試一種新的方法：利用 serverless 架構(gòu)來實(shí)現(xiàn)后端服務(wù)，通過結(jié)合使用 api 網(wǎng)關(guān)、云函數(shù)、云數(shù)據(jù)庫等服務(wù)，從而能夠無需關(guān)心服務(wù)器，自動(dòng)實(shí)現(xiàn)高并發(fā)，快速上線和無縫更新能力。騰訊云 SCF無服務(wù)器云函數(shù)高級(jí)產(chǎn)品經(jīng)理黃文俊詳細(xì)講解了如何使用 Serverless 來構(gòu)建小程序后臺(tái)。

微信小程序及后臺(tái)交互架構(gòu)

小程序，是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)是最具有出色的使用體驗(yàn)。它的加載方式比傳統(tǒng)的 APP方式更快速，開發(fā)上線也更快速。除了本身的界面展示和數(shù)據(jù)刷新之外，小程序的數(shù)據(jù)獲取通過微信和后端進(jìn)行交互，小程序的運(yùn)行，是一種類前端的運(yùn)行方式，它整個(gè)運(yùn)行是在微信內(nèi)，而它和后端的交互，是通過微信進(jìn)行轉(zhuǎn)發(fā)的。在實(shí)際運(yùn)行并發(fā)出請(qǐng)求時(shí)，小程序首先會(huì)調(diào)用微信 API，發(fā)出 API請(qǐng)求，這個(gè)請(qǐng)求發(fā)送給微信，微信再通過網(wǎng)絡(luò)請(qǐng)求發(fā)送到用戶自己的服務(wù)器上，用戶在自己的服務(wù)上拿到這個(gè)請(qǐng)求以后進(jìn)行數(shù)據(jù)的處理，然后再來響應(yīng)給到前端，這就是一個(gè)小程序和后臺(tái)交互的完整過程。

傳統(tǒng)的后臺(tái)架構(gòu)需要提供 API服務(wù)的情況下，首先是需要使用負(fù)載均衡，然后接入業(yè)務(wù)應(yīng)用服務(wù)器，之后接入文件存儲(chǔ)、包括結(jié)構(gòu)化和非結(jié)構(gòu)化的數(shù)據(jù)庫服務(wù)，以及緩存服務(wù)。在這個(gè)過程中，為了保證系統(tǒng)不會(huì)由于某一個(gè)的服務(wù)器宕機(jī)導(dǎo)致服務(wù)癱瘓，需要分別建立業(yè)務(wù)應(yīng)用集群、數(shù)據(jù)庫集群、分布式文件存儲(chǔ)、緩存集群；建立集群的一個(gè)首要作用就是確保不會(huì)由于某一個(gè)單點(diǎn)故障導(dǎo)致整個(gè)服務(wù)不可用。下圖為傳統(tǒng)的后臺(tái)架構(gòu)圖。

這種多服務(wù)多集群的架構(gòu)模式，在中大型互聯(lián)網(wǎng)公司都是已經(jīng)具備的了，但是作為個(gè)人開發(fā)者來說，搭建這一套系統(tǒng)比較困難，開發(fā)者需要了解整個(gè)系統(tǒng)的配置，如負(fù)載均衡怎么配置、數(shù)據(jù)庫集群怎么配置等等。為了讓大家把精力從后臺(tái)的基礎(chǔ)架構(gòu)搭建當(dāng)中解放出來，將更多的時(shí)間投放到業(yè)務(wù)和小程序本身，騰訊云在這里為大家提供了使用 Serverless架構(gòu)構(gòu)建小程序后臺(tái)的方案。

Serverless 架構(gòu)介紹

Serverless架構(gòu)，英文稱之為 Serverless，中文稱之為無服務(wù)器，也就是說大家不用購買服務(wù)器，不用配置虛擬機(jī)或者物理機(jī)，它使用計(jì)算托管的方式，用戶在使用的時(shí)候不用擔(dān)心它的安全性，也不用擔(dān)心可能服務(wù)器宕機(jī)導(dǎo)致的故障。

那么，他是如何實(shí)現(xiàn)的呢？下圖為騰訊云 Serverless架構(gòu)，可以看成兩部分，第一部分就是函數(shù)即服務(wù)，計(jì)算托管在云函數(shù)內(nèi)，真正實(shí)現(xiàn)了你業(yè)務(wù)邏輯的托管計(jì)算。另外一種是后端即服務(wù)，包括對(duì)象存儲(chǔ)、消息列隊(duì)、云數(shù)據(jù)庫、云緩存、API網(wǎng)關(guān)等等。

因?yàn)?Serverless架構(gòu)是計(jì)算托管型的，計(jì)算托管意味著把真正的業(yè)務(wù)代碼托管到云上面，然后在云上面運(yùn)行。Serverless架構(gòu)的運(yùn)行方式有一個(gè)特點(diǎn)，業(yè)務(wù)邏輯是觸發(fā)式運(yùn)行的。云函數(shù)在和各個(gè)云產(chǎn)品或云服務(wù)打通以后，各個(gè)產(chǎn)品或服務(wù)產(chǎn)生的事件，都能觸發(fā)業(yè)務(wù)邏輯的運(yùn)行。我們?cè)谶@里會(huì)將云函數(shù)與 API網(wǎng)關(guān)進(jìn)行結(jié)合，當(dāng)小程序發(fā)出的請(qǐng)求到 API網(wǎng)關(guān)時(shí)，就會(huì)產(chǎn)生一個(gè) API請(qǐng)求事件，然后觸發(fā)業(yè)務(wù)代碼的運(yùn)行。用戶在進(jìn)行托管的時(shí)候，將代碼和觸發(fā)器的配置提交到云上來，代碼內(nèi)容就是對(duì)事件進(jìn)行邏輯處理。在事件發(fā)生和處理的過程中，對(duì)于每一次的事件，都有一個(gè)代碼對(duì)應(yīng)的實(shí)例拉起，實(shí)際上每個(gè)實(shí)例都是單獨(dú)處理一個(gè)事件。用戶發(fā)出請(qǐng)求時(shí)服務(wù)運(yùn)行，沒有請(qǐng)求時(shí)服務(wù)不運(yùn)行。同時(shí)本身產(chǎn)品的計(jì)費(fèi)模式也是根據(jù)實(shí)際服務(wù)運(yùn)行的時(shí)間計(jì)費(fèi)的。

同時(shí)，利用對(duì)象存儲(chǔ)，大家不用自己構(gòu)建分布式存儲(chǔ)，不用擔(dān)心數(shù)據(jù)的丟失和安全性問題；使用在云上提供的數(shù)據(jù)庫、消息隊(duì)列也是一樣，不用購買服務(wù)器自己搭建，購買或者開通就立刻可以開始使用，因此這種服務(wù)也可以稱之為 Serverless。

Serverless 后臺(tái)開發(fā)方案

那么怎么使用 Serverless架構(gòu)實(shí)現(xiàn)后臺(tái)開發(fā)呢？傳統(tǒng)的架構(gòu)中的 web服務(wù)替換為 Serverless 架構(gòu)的話，對(duì)外提供服務(wù)所暴露的 API，我們使用 API 網(wǎng)關(guān)來管理，用戶的業(yè)務(wù)邏輯，我們放在云函數(shù)內(nèi)運(yùn)行，需要結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)或者文件存儲(chǔ)，我們使用數(shù)據(jù)庫服務(wù)，云緩存服務(wù)或?qū)ο蟠鎯?chǔ)服務(wù)等，同時(shí)其他的更多服務(wù)，也都可以直接使用云山提供的，直接通過代碼調(diào)用。

具體搭建方案如上圖，小程序除了本身的頁面啟動(dòng)和展示，后續(xù)和網(wǎng)絡(luò)的交互都是由小程序發(fā)起，因此，小程序通過網(wǎng)絡(luò) API，發(fā)起請(qǐng)求，獲得響應(yīng)并將數(shù)據(jù)展示到界面，使內(nèi)容可以被用戶看到；接著是通過 API 網(wǎng)關(guān) 管理 API，配置 API 的路徑、方法、參數(shù)及校驗(yàn)，管理 API 的發(fā)布和切換；API網(wǎng)關(guān)之后就是云函數(shù)，云函數(shù)用來處理業(yè)務(wù)的邏輯，發(fā)起到數(shù)據(jù)庫的連接，讀取及寫入數(shù)據(jù)庫，生成響應(yīng)數(shù)據(jù)，這里根據(jù)實(shí)際業(yè)務(wù)情況，如果需要使用數(shù)據(jù)庫，就在代碼內(nèi)發(fā)數(shù)據(jù)庫的連接，需要存儲(chǔ)文件，就調(diào)用相應(yīng)的對(duì)象存儲(chǔ)接口來寫文件；最后就是云數(shù)據(jù)庫，用于存儲(chǔ)業(yè)務(wù)數(shù)據(jù)。

通過聯(lián)合使用 API網(wǎng)關(guān)、云函數(shù)、云數(shù)據(jù)庫這幾款云產(chǎn)品或云服務(wù)，我們展示了在沒有購買和配置服務(wù)器的基礎(chǔ)上實(shí)現(xiàn)小程序登錄服務(wù)的實(shí)現(xiàn)，完成服務(wù)的 Serverless化。利用 Serverless架構(gòu)實(shí)現(xiàn)的小程序，開發(fā)者不需要擔(dān)心運(yùn)維，同時(shí)因?yàn)檫\(yùn)行無狀態(tài)，所以能輕易實(shí)現(xiàn)快速迭代、極速部署，其彈性計(jì)算能力也能滿足用戶上萬或者更高的并發(fā)。

3小程序在直播產(chǎn)品中的技術(shù)應(yīng)用

小程序如今已被用于生活的方方面面，包括電商、社交等場景，騰訊 Web前端開發(fā)高級(jí)工程師楊春文，現(xiàn)場以 NOW直播為例，介紹騰訊小程序在直播領(lǐng)域的一些嘗試，包括登錄能力建設(shè)、基于騰訊云基礎(chǔ)音視頻能力的直播流性能對(duì)比和選擇、動(dòng)畫開發(fā)、直播間元素布局開發(fā)、官方支持的一些實(shí)用基礎(chǔ)能力等，并分享在做開發(fā)過程中遇到的一些問題及解決方案。

如何基于騰訊云構(gòu)建直播小程序？

對(duì)于一個(gè)直播的小程序而言，怎么樣才能夠用最低成本構(gòu)建呢？從小程序?qū)用鎭碚f，有兩點(diǎn)：主播端和觀眾端，通常主播端需要通過一些組件，完成視頻到服務(wù)器的推送，進(jìn)而到觀眾端。這個(gè)過程里，對(duì)于小程序開發(fā)者來說，核心點(diǎn)包括兩個(gè)：一個(gè)推流，一個(gè)拉流。

一般而言，開發(fā)者自建轉(zhuǎn)碼、傳輸?shù)裙δ軄韺?shí)現(xiàn)視頻的推流和拉流是非常麻煩的，騰訊云有非常成熟的視頻解決方案幫助完成這個(gè)過程。下圖為騰訊云的直播小程序解決方案，使用過程也非常簡單：

申請(qǐng)騰訊云直播服務(wù)；

獲取加密私鑰；

部署自己的業(yè)務(wù)后臺(tái) (提供現(xiàn)成代碼)；

生成開播端地址 (上行)；

生成播放端地址 (下行)；

開啟小程序。

通過以上幾個(gè)步驟，可以基本完成直播小程序的配置工作。

那么，開播地址以及播放的地址是如何生成的？這里面主要包含兩部分，如上圖，左邊的主播端首先生成一個(gè)開播地址，主播端的小程序通過推流 URL，把視頻推送到騰訊云里面，騰訊云通過系列的編碼、傳輸、解碼工作，生成播放 URL，通過播放 URL(觀看地址)推流給觀眾。

遇到的一些坑及其解決方案

上面講的是怎么構(gòu)建一個(gè)小程序，騰訊 NOW直播團(tuán)隊(duì)在開發(fā)直播應(yīng)用的時(shí)候，也遇到了許多問題，楊春文現(xiàn)場就布局、setData、大圖片和預(yù)加載四方面的痛點(diǎn)和解決方案展開了詳細(xì)講解。

布局之痛

問題描述：video等 native元素?zé)o法和 webview元素重疊，視頻與直播間元素的混排實(shí)現(xiàn)困難，cover-view組件與普通組件差異太大。

解決方案：折衷使用 canvas來實(shí)現(xiàn)動(dòng)態(tài)的效果，canvas是一個(gè)原生的組件，可以用于復(fù)雜布局。但 canvas實(shí)現(xiàn)也有一些問題，就目前來說，比如用 canvas實(shí)現(xiàn)的功能放在小程序里面使用時(shí)，手機(jī)溫度升高、會(huì)有發(fā)熱現(xiàn)象產(chǎn)生等等，解決方案是將客戶端實(shí)現(xiàn)的 canvas和我們 web實(shí)現(xiàn)的 canvas在性能上面差異化，以適配不同端的需求。同時(shí)，NOW直播團(tuán)隊(duì)也在嘗試做一些性能上的改進(jìn)的工作，解決用戶體驗(yàn)問題。

setData優(yōu)化

問題描述：setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，頻繁 SetData等于頻繁 DOM操作，從而導(dǎo)致 UI延遲；同時(shí)超大數(shù)據(jù) setData也會(huì)使腳本執(zhí)行時(shí)間過大，在后臺(tái) setData，也會(huì)產(chǎn)生多余的資源 (CPU/內(nèi)存 /電量…)消耗，占用前臺(tái) JS執(zhí)行。

解決方案：避免頻繁的 SetData操作。如我們不停滾動(dòng)的評(píng)論以及彈幕的消息，最開始的時(shí)候每展示一條就需要進(jìn)行一次 SetData操作，然后產(chǎn)生一個(gè) dom操作，這是非常消耗成本的。改進(jìn)方案是一次返回多條消息，在小程序端滾動(dòng)展示，避免一條消息產(chǎn)生一次 setData，完成體驗(yàn)上面的權(quán)衡。另外，在 onHide 時(shí)停止數(shù)據(jù)更新，從前一個(gè)頁面切換到后一個(gè)，暫停前一個(gè)頁面推薦更新操作。

大圖片之殤

問題描述：小程序渲染層，通過 webview的方式進(jìn)行，如果圖片較大，不僅會(huì)占用過多內(nèi)存，也會(huì)導(dǎo)致延遲和卡頓現(xiàn)象。

解決方案：如果一定需要大圖片，建議定期銷毀這些大圖片，比如以下圖片，只要在區(qū)域里面才不會(huì)銷毀，如果不在這個(gè)區(qū)域里面就可以銷毀，一些不需要的圖片如果一直存在，對(duì)性能的消耗會(huì)比較大。

預(yù)加載

問題描述：數(shù)據(jù)預(yù)加載的過程，頁面切換，這個(gè)過程比較消耗時(shí)間

解決方案：當(dāng)用戶剛剛進(jìn)入下一個(gè)頁面時(shí)，頁面還需要拉取數(shù)據(jù)，進(jìn)行渲染，這個(gè)過程從需要從 A頁面進(jìn)入到 B頁面，然后再到數(shù)據(jù)，中間這個(gè) A切換到 B，這里面有一段時(shí)間的消耗，在 A頁面切到 B頁面的過程當(dāng)中，可以同時(shí)拉取一個(gè)數(shù)據(jù)，B頁面進(jìn)來，直接從這個(gè)數(shù)據(jù)里面提取需要的數(shù)據(jù)，這樣就不需要再發(fā)一個(gè)請(qǐng)求重新拉去數(shù)據(jù)，避免中間時(shí)間的消耗等等延遲的問題。

4如何開發(fā)一款小游戲

小游戲目前的火爆程度已毋庸置疑，從全民“跳一跳”到如今的“星途 WeGoing”，小游戲已逐漸滲入消費(fèi)者日常，成為老少皆宜的娛樂產(chǎn)品之一。騰訊微信高級(jí)工程師鄒偉現(xiàn)場結(jié)合《星途 WeGoing》的底層架構(gòu)和研發(fā)設(shè)計(jì)，分享了如何更好的利用微信的開放能力開發(fā)一款小游戲。

什么是小游戲？

從普通用戶的視角看，小游戲是小程序的一個(gè)子類目，可在微信內(nèi)被便捷的獲取和傳播，即點(diǎn)即玩，具備出色的用戶體驗(yàn)。小游戲是小程序，普通用戶分不清也無需分清。

同時(shí)，從開發(fā)者的視角，它可以看作是基于 Canvas/WebGL + 微信社交開放能力的一個(gè)新平臺(tái)。下圖是一個(gè)小游戲的一個(gè)架構(gòu)概覽：

這是一個(gè)典型的分層架構(gòu)。最上層藍(lán)色部分，是游戲代碼，分為游戲邏輯，游戲引擎、weapp-adapter三部分。大部分游戲開發(fā)會(huì)用到一些引擎的工具、工作流，以及利用引擎封裝的高層 API去實(shí)現(xiàn)游戲邏輯。其次是 weapp-adapter，因?yàn)樾∮螒虻牡讓右环矫娌皇?webview，可以簡單看成是 webview經(jīng)過精簡、優(yōu)化過后的平臺(tái)；另一方面核心能力的實(shí)現(xiàn)上卻參考了 webview。所以這里如果有一個(gè)適配器，把小游戲的底層 API——wx API適配到一個(gè)接近 webview的接口，對(duì)上層引擎、已存在的游戲接入微信小游戲平臺(tái)則會(huì)更加容易，這個(gè)就是 weapp-adapter的作用。其中只有游戲邏輯是必要的。

中間層紅色部分是微信以及小游戲 Runtime，Runtime對(duì)外暴露的能力叫 wx API，有一個(gè)基礎(chǔ)庫的。有一個(gè) jsvm用于執(zhí)行游戲的 Javascript代碼，在安卓上是用 V8Core，iOS則是 JavaScriptCore。再下面一層是核心的渲染能力的實(shí)現(xiàn)，包括 Canvas 2d以及 WebGL，當(dāng)然還有微信開放能力相關(guān) API的實(shí)現(xiàn)。

可以看到，在架構(gòu)上小游戲和小程序是有差別的，小游戲沒有頁面概念的，wxss/wxml不再存在。其次，底層實(shí)現(xiàn)也不是 webview，小游戲和 webview的關(guān)系只能說是渲染相關(guān)的核心能力可以通過 weapp-adapter的簡單適配保持接口一致，但同時(shí)很多 webview上存在的功能并沒有對(duì)等的實(shí)現(xiàn)，比如小游戲就沒有 DOM/BOM的概念，也沒有全局的 document/window對(duì)象。

小游戲的入口為 game js文件，語言為 Javascript，但有一些限制，比如禁止執(zhí)行動(dòng)態(tài)代碼，因此 eval、new Function等能力是不支持的。配置為 game.json，可以配置橫豎屏、接口超時(shí)等參數(shù)。js里面可以組合 wx API的能力來實(shí)現(xiàn)游戲邏輯， 非代碼類的資源應(yīng)該盡量放到 cdn，減少整個(gè)代碼包打包后的大小，以加快用戶首次進(jìn)入時(shí)的速度，微信對(duì)首包的大小目前限制為 4MB。

小游戲能力概覽（小游戲能力在不斷擴(kuò)充中，最新、完整能力可關(guān)注我們的開發(fā)文檔）：

如何開發(fā)一款小游戲？

小游戲的核心邏輯的開發(fā)過程和傳統(tǒng)的端游、頁游以及現(xiàn)在的手游，并沒有多大區(qū)別。這里會(huì)著重介紹一下怎么更好的利用微信小游戲的平臺(tái)開放能力，包括選擇小游戲引擎選擇、設(shè)備 /環(huán)境適配、微信登錄、緩存、開放數(shù)據(jù)域、分享、支付、性能、版本更新機(jī)制、運(yùn)維這幾個(gè)部分。

選擇小游戲引擎

微信跟引擎商也有比較密切的合作，一般現(xiàn)在的游戲引擎都會(huì)支持發(fā)布到多個(gè)平臺(tái)，對(duì)微信小游戲這個(gè)新平臺(tái)而言，已經(jīng)有一部分引擎做了適配，比如 Cocos Creator、Egret Engine以及 LayAir Engine。適配的主要工作，類似之前提到的 weapp-adapter，把 wx API的能力，和引擎銜接起來。比如引擎一般會(huì)把小游戲平臺(tái)和 webview平臺(tái)對(duì)標(biāo)，適配過程就是把 wx API對(duì)應(yīng)到 webview的能力，同時(shí)把只存在于 webview能力的依賴去除，比如不再依賴 BOM、DOM。

設(shè)備 /環(huán)境適配

微信本身運(yùn)行在不同 OS平臺(tái)，如 iOS、Android，而不同平臺(tái)又運(yùn)行于不同的物理設(shè)備。運(yùn)行于微信之上的小游戲，自然就面對(duì)不同類型設(shè)備和環(huán)境的適配。當(dāng)然能力上，小游戲平臺(tái)已經(jīng)盡量消除了它們的區(qū)別。但仍然有一些工作需要開發(fā)者去針對(duì)性的優(yōu)化，比如高分辨率屏幕，可以提供更高清的畫質(zhì)。小游戲會(huì)有 API提供獲取屏幕的寬高、設(shè)備像素比等能力。小游戲開發(fā)完成后，在開發(fā)者工具也可以發(fā)起真機(jī)測試的請(qǐng)求，微信提供了不同設(shè)備的測試集群，幫助開發(fā)者提前去發(fā)現(xiàn)問題?；A(chǔ)庫提供的 wx API本身是一個(gè)不斷迭代更新的過程，對(duì)于使用了新能力的小游戲，需要做低版本兼容。比如在檢測到不支持新 API的低版本允許有損服務(wù)用戶。同時(shí)，如果某個(gè)低版本的用戶占比較少，可以考慮在 mp.weixin.qq.com管理后臺(tái)直接配置小游戲要求的基礎(chǔ)庫最低版本，當(dāng)然也意味著這一部分用戶在接觸到這個(gè)小游戲時(shí)，微信客戶端會(huì)彈出一個(gè)要求用戶更新到微信新版本才可使用該小游戲的提示，如果他不更新，你就可能失去了這個(gè)用戶。

微信登錄

小游戲的登錄過程，跟小程序是類似的。需要用戶自己去定義登錄狀態(tài)。appsecret/session_key代表的是小游戲開發(fā)者和微信平臺(tái)之間的一種信任約定，比如支付、上報(bào)托管數(shù)據(jù)，平臺(tái)方需要驗(yàn)證 access_token(只有 appsecret才能換得到)，和用戶相關(guān)的還要驗(yàn)證 session_key的簽名，才能保證請(qǐng)求來自于小游戲開發(fā)者 /用戶，而不是惡意的第三方和隨意捏造的用戶。access_token是一種應(yīng)用態(tài)的 access_token，和用戶無關(guān)，需要保證全局維護(hù)一份，應(yīng)該有一個(gè)中控的模塊去保證 access_token有效，同時(shí)在有效期內(nèi)直接使用本地 cache的 access_token，而不是每次使用都去生成新的 access_token，否則可能遇到調(diào)用頻率限制的錯(cuò)誤而影響服務(wù)。切記 appsecret/session_key不要放到前端代碼中去，否則可能會(huì)被壞人利用損壞小游戲開發(fā)者 /用戶的權(quán)益。

緩存

緩存類型包括數(shù)據(jù)緩存和文件緩存兩類。數(shù)據(jù)緩存即 key-value存儲(chǔ)，適合結(jié)構(gòu)化類型的小數(shù)據(jù)存儲(chǔ)，上限為 10MB。文件緩存提供了一個(gè)完整的文件系統(tǒng) API，包括目錄 /文件的增刪改讀，適合針對(duì)經(jīng)常使用的網(wǎng)絡(luò)資源做本地緩存，上限是 50MB。

和瀏覽器不同的是，微信只提供了基本的存儲(chǔ)管理能力，并不對(duì)存儲(chǔ)什么，和存儲(chǔ)滿時(shí)刪除什么做一些操作。開發(fā)者自行靈活定義緩存以及淘汰策略，比如對(duì)經(jīng)常訪問的資源存儲(chǔ)到文件系統(tǒng)以及在文件存儲(chǔ)滿時(shí)，清理一些最近不常訪問的文件。

開放數(shù)據(jù)域

開放數(shù)據(jù)域是一個(gè)封閉、獨(dú)立的 JavaScript 作用域，和執(zhí)行游戲邏輯的環(huán)境——稱為“主域”隔離。其目的是在保證用戶隱私的前提下開放用戶數(shù)據(jù)給第三方，提升小游戲的整體用戶體驗(yàn)。以下為物理視圖，主域的入口為 game.js，開放數(shù)據(jù)域則是一個(gè)獨(dú)立的目錄，其入口文件為 index.js：

主域和開放數(shù)據(jù)域的通信受到嚴(yán)格的管制，基本原則是只進(jìn)不“出”。

只進(jìn)：允許外部的數(shù)據(jù)進(jìn)入開放數(shù)據(jù)域，即主域可以隨時(shí) postMessage到開放域，以及開放域引用主域準(zhǔn)備好的本地資源

不“出”：不允許開放數(shù)據(jù)域的數(shù)據(jù)被上傳到第三方服務(wù)器去。因?yàn)殚_放數(shù)據(jù)域里面，index.js是可以直接訪問到用戶敏感數(shù)據(jù)的，比如同玩好友數(shù)據(jù)。當(dāng)然最終開放數(shù)據(jù)域需要 index.js在綜合各種數(shù)據(jù)后把數(shù)據(jù)以圖形圖像的方式渲染到 sharedCanvas上，在主語 sharedCanvas允許 draw到主域的上屏 Canvas上，最終用戶會(huì)在顯示屏上看到 game.js畫出來的好友排行榜、群排行榜或好友超越等社交互動(dòng)信息。

目前開放數(shù)據(jù)域僅支持 2D渲染模式。

分享

包括自定義分享和系統(tǒng)菜單分享，可以分享到群聊、單聊。也可以把分享上下文與特定的群關(guān)聯(lián)，實(shí)現(xiàn)一些群 PK、群排行榜的場景。分享是一把雙刃劍，需要謹(jǐn)慎使用，一方面避免過度騷擾用戶 /群聊，另一方面增強(qiáng)社交互動(dòng)提供好的游戲體驗(yàn)，需要找到一個(gè)合適的平衡點(diǎn)。

支付

小游戲在安卓下支持虛擬支付，它的方式目前只有一種：即貨幣托管的方式。主要分為 2個(gè)流程：

充值：RMB -> 游戲幣，這里開發(fā)者只需要拉起支付的流程，平臺(tái)負(fù)責(zé)把用戶 RMB兌換成對(duì)應(yīng)的游戲幣，存儲(chǔ)到用戶對(duì)應(yīng)的游戲帳號(hào)上

使用游戲幣購買道具：開發(fā)者可以扣除對(duì)應(yīng)的游戲幣，給用戶發(fā)放游戲內(nèi)道具，扣除游戲幣的過程需要有一定的事務(wù)機(jī)制，去保證在網(wǎng)絡(luò)異常的情況下交易正常?？鄢螒驇诺慕涌谥С指鶕?jù)訂單 id去重，意味著網(wǎng)絡(luò)超時(shí)等情況下，開發(fā)者可用同樣的訂單 id去重試扣除，直至返回明確的響應(yīng)。

以下為簡單時(shí)序圖，部分角色針對(duì)開發(fā)者無需關(guān)心的部分做了相應(yīng)簡化處理：

性能

小游戲常見的性能問題，一般是內(nèi)存造成的。如果內(nèi)存占用太多會(huì)被微信客戶端主動(dòng)關(guān)閉，因此開發(fā)者在用戶游戲過程中要及時(shí)釋放不再使用的內(nèi)存（js代碼去除引用，或主動(dòng)調(diào)用對(duì)應(yīng)資源的釋放接口，如果有的話），特別是 Canvas和 Image類大型對(duì)象，同時(shí)可以主動(dòng)調(diào)用 wx.triggerGC觸發(fā)底層回收對(duì)應(yīng)資源。

對(duì)于和游戲邏輯相對(duì)獨(dú)立的工作，可以考慮在 worker中去實(shí)現(xiàn)，小游戲提供了獨(dú)立的 worker線程執(zhí)行 js邏輯的能力。

版本更新機(jī)制

小游戲啟動(dòng)的過程分為冷啟動(dòng)和熱啟動(dòng)。冷啟動(dòng)是指內(nèi)存中無該小游戲的運(yùn)行實(shí)例的情況下，啟動(dòng)小游戲的過程；熱啟動(dòng)是指小游戲的運(yùn)行實(shí)例在內(nèi)存中還存在，只是暫時(shí)切換到了后臺(tái)，這時(shí)用戶再次觸發(fā)小游戲回到前臺(tái)的過程。

小游戲會(huì)在冷啟動(dòng)時(shí)檢查小游戲的版本，如有新版本，在下載回本地后，下一次冷啟動(dòng)即可使用最新版。當(dāng)然，我們也提供了 API可以供開發(fā)者決策在有版本可用時(shí)，是否需要強(qiáng)制更新：

運(yùn)維

mp.weixin.qq.com管理端提供了發(fā)布、灰度發(fā)布、回滾、停服等能力，可以充分利用平臺(tái)已有的能力。

特別提醒，小游戲有完善的后端監(jiān)控，可以通過“運(yùn)維中心”開啟，比如腳本錯(cuò)誤監(jiān)控（腳本錯(cuò)誤主要由運(yùn)行過程中未捕獲的異常觸發(fā)，需要重點(diǎn)關(guān)注。該類異常，可能會(huì)導(dǎo)致用戶小游戲前端的 js邏輯暫停執(zhí)行）：

5有贊電商小程序的實(shí)踐

黎貝卡小程序店鋪“首次上新 7分鐘破百萬”、“二次上新 59秒破百萬”，這些傲人的成績背后離不開有贊技術(shù)團(tuán)隊(duì)的保駕護(hù)航，有贊電商小程序負(fù)責(zé)人施德來現(xiàn)場與大家分享有贊在電商小程序的發(fā)展歷史與現(xiàn)狀，以及有贊在小程序技術(shù)上的積累。例如小程序組件庫的開源、在微頁面里如何將 H5與小程序合二為一以及有贊在開發(fā)過程中遇到的一些問題，如何利用官方解決方案進(jìn)行最優(yōu)處理等。

在小程序出現(xiàn)之前，做移動(dòng)開發(fā)一般有兩個(gè)模式：第一種是 web應(yīng)用如 H5，一種是原生應(yīng)用。這兩種模式的特點(diǎn)都是很鮮明的，比如 H5這類應(yīng)用無需安裝、跨平臺(tái)、易開發(fā)、傳播性比較好，但頁面簡單，打開速度慢、Native能力差，用戶體驗(yàn)一般。而原生 APP體驗(yàn)流程、功能齊全，但則需要安裝，開發(fā)速度慢、更新麻煩，對(duì)開發(fā)的專業(yè)要求也比較高。

小程序結(jié)合了兩者的優(yōu)點(diǎn)，很多 H5里面需要高階能力才能解決的問題，被小程序用降維的方式解決了，比如說 H5里面原先要做異步加載等系列優(yōu)化措施，才能讓 H5頁面打開更快但小程序通過打包提交、提前下載、Native 和 Web 混合渲染的方式很低門檻地解決了這些問題?？偟膩碚f，小程序集合了開發(fā)簡單、功能多、體驗(yàn)好等系列特點(diǎn)，是現(xiàn)今主流的移動(dòng)應(yīng)用。

有贊從 17年開始介入小程序開發(fā)，隨著微信小程序功能與接口的逐步完善和更新，在 17年下半年時(shí)有贊集中發(fā)力，并在 18年開始爆發(fā)。

在功能上，有贊將原先 H5里面大量的核心能力全部搬到小程序，同時(shí)也做了小程序特有的能力。包括店鋪、商品、訂單、客戶管理、數(shù)據(jù)，營銷工具，營銷渠道等等，這里面有些是參考的，有些是有贊首創(chuàng)的。

這里面的功能可以說是非常齊全的，商家可以根據(jù)自己的需求進(jìn)行功能選擇。同時(shí)，有贊也為海量小程序商家提供小程序技術(shù)服務(wù)，確保商家小程序正常上線運(yùn)營。

技術(shù)上的探索和積累

如何同時(shí)產(chǎn)出海量獨(dú)立的微商城小程序？

雖然代碼是同一套，但每個(gè)商家的小程序都是獨(dú)立名字的，獨(dú)立提交審核的，版本也不同。作為平臺(tái)開發(fā)者，微信是提供這種能力的，幫商家提交新版本小程序的時(shí)候，使用相同的模板 ID的同時(shí)，每個(gè)商家的小程序額外提交一份 ext.json，里面包含這個(gè)商家的小程序特有的東西，比如 appid、底部導(dǎo)航配置等。有贊把這兩個(gè)信息提交給微信，微信開始審核這個(gè)小程序。

一套代碼兩個(gè)馬甲

像有贊的公共版小程序和專享版小程序，他們之間有大量的公共業(yè)務(wù)代碼，代碼都在同一個(gè)倉庫里，專享版是公共版的一個(gè)子集。公共版有一個(gè)專門的“app.json”，我們把它命名為 app-youzan.json，專享版對(duì)應(yīng)的就是默認(rèn)的 app.json。我們自己寫了個(gè) webpack的插件，會(huì)在開始編譯代碼前把 app.json里的內(nèi)容 merge到 app-youzan.json，然后在后續(xù)的編譯過程里，針對(duì) app-youzan.json(公共版)和 app.json(專享版)分別打兩次，以輸出 2個(gè)版本。

體積來越大，馬上就突破 2M了

17年 11月份就已經(jīng) 1.4M了，眼看按這個(gè)趨勢(shì)很快要到 2M，有贊嘗試了用第三方工具 wxapp—webpack—plugin，在它基礎(chǔ)上二次開發(fā)了下，只打包有用到的模塊，合并重復(fù)的模塊。如上圖，12月份包的大小降了下去了，后來微信開放了分包的功能，有贊 4月份也簡單嘗試了一下，推薦大家用起來。

如何提高開發(fā)效率？

推薦有贊開源的 ZanUI-Weapp 組件庫（ https://github.com/youzan/zanui-weapp ），Star 已經(jīng) 4k多了。

Zan Proxy（https://github.com/youzan/zan-proxy） 是我們開源的代理、Mock工具，功能比較全面，可以很方便地做到本地代碼調(diào)試線上頁面線上接口。如果你還在用 nginx做這個(gè)事情，可以試試 ZanProxy。

前店后廠與商家共建產(chǎn)品的模式，快速迭代往前跑，減少中間環(huán)節(jié)。

如何提高穩(wěn)定性？

有贊的方法就是體驗(yàn)版、穩(wěn)定版機(jī)制。每 2個(gè)星期發(fā)一個(gè)新版本，在更新所有小程序前，會(huì)先讓 100+小程序先升級(jí)到新版本，至少內(nèi)測一個(gè)星期。這 100+小程序?qū)?yīng)的商家就是我們的內(nèi)測商家。

另外一種方法是利用好回滾、撤銷審核接口，這部分是騰訊提供的能力，當(dāng)有贊發(fā)現(xiàn)某一個(gè)版本有問題，可以把所有或者部分商家的小程序都回滾到上一個(gè)版本。