朱展：騰訊雲小程式解決方案

大家下午好，我今天給大家帶來的分享主題是騰訊雲小程式解決方案。首先做一個自我介紹，我叫朱展，來自騰訊雲，目前負責騰訊雲小程式解決方案，從事設計開發的工作。

開始之前做一個現場的調查，多少人有開發小程式的經驗，請舉手！謝謝！比我想象的多一點，多少人用過小程式的？相信大家都用過。

為什麼這麼說大家都用過微信小程式呢？2017年3月份到2017年的11月份的增長趨勢比較平穩，有幾千萬億的量，2017年12月份出現了暴漲，那個點就是小遊戲的釋出，也就是跳一跳成為國民遊戲的時間，大家都想辦法刷榜。在這個熱點過後，它的日活沒有出現斷崖式的下降，還是維持到很高的水準，現在的日活大概就是這個樣子。這是我們今天沙龍的背景。

小程式的架構

講我們微信小程式解決方案之前，還是想講一下小程式本身的架構，我們做移動開發一般有兩個模式，第一種是web應用，也就是原生應用，還有混合式開發模式這兩種模式，它們的特點都是很鮮明的，比如說web應用，不需要安裝，分享起來很方便，傳播性比較好。原生應用一般需要安裝，而且安裝包的大小不等，幾十兆到幾百兆都很正常。

從開發來講，Web應用是免安裝的，原生應用要安裝，需要專業開發，從開發者技能上來說要求比較高。原生應用由於對開發者要求比較高，它能夠充分利用我們終端的能力，很大的優點是使用者體驗會比較好；小程式是結合了兩種開發模式的優點，首先是免安裝的，一個使用者到微信裡面開啟小程式，用完就走，不用做什麼安裝的動作。

同時，它的開發模式也是一種類web的模式，它的前端和我們的h5的前端很相似，用JS開發起來的成本會簡單很多。使用者體驗上可以媲美原生應用，後面我們會著重分析一下。最重要的一點，小程式是基於微信這個平臺的，它會享有微信帶來的便利性，它具備跨平臺的開發能力。雖然我們H5的應用一般來說也會具備跨平臺的能力，但是H5是基於開發web標準的，有過開發經驗的同學知道，我們的業務規範是一個漫長的過程，理想是美好的，現實是骨感的。但是小程式就沒有這個問題，微信天生是一個社交的軟體，它的傳播性和可分享意義非常好。我們可以通過微信的掃一掃開啟小程式，可以通過群聊分享一個小程式，比如最近比較火爆的彈一彈小程式，其實它的傳播度很高。

小程式基本架構和使用者體驗

我們看一下小程式底層的東西和它的使用者體驗，這個圖是小程式的基本架構圖，它的上層分兩塊，一層是是檢視層，也是webviews，另一塊是執行緒，邏輯層，也就是appService，這兩層在兩個不同的執行緒裡面處理，跟傳統的web有根本的不同。傳統的web渲染的時候，如果邏輯裡面有很複雜的處理，往往會導致介面出現卡頓的現象。小程式沒有這個問題，如果沒有呼叫一些渲染的東西，不會導致你的介面的流暢度下降。由於它們在不同的執行緒裡跑，這兩層不能進行直接的互動，必須通過一些手段，比如有一箇中間層去互動，它的基本功能是連線JS的執行環境和底層的系統，系統能力可以實現JS和原生能力的互相呼叫，兩面的兩層互相通訊，使用者觸發某事件以後就會響應Serverless，如果想去更新介面的某一個內容，微信的api通過呼叫形式展現出來。

這張圖是介紹小程式渲染的一個圖，編譯打包的階段，我們編寫小程式的時候會寫一個類WXML的東西，包含一個WCC的編譯工具，使用者在執行這個小程式的時候，會和你的邏輯層傳入的資料做一個編譯，渲染成最終的介面，這就是最簡單的一個區域性更新的過程。

這是小程式載入的幾種簡單的示意圖，小程式在手機載入的時候，要在CDN上面拉一個小程式的包，小程式在手機架構的時候可能有一個等待的時間，當這次安裝包快取到本地以後，下次再開啟時候直接從快取裡面讀取安裝包的內容，如果有新的版本，小程式也不會等新版本更新完了再開啟APP，而是直接用上一層快取的小程式，等你再啟動的時候，使用新的安裝包替換舊的。

冷載入和熱載入的區別

熱載入是小程式推出之後，我們在系統層面實現的東西，小程式跑的執行緒是在後臺執行的，沒有被銷燬的，這個時間大概是5分鐘左右。在這個時間內，你訪問小程式的時候，直接從後臺遷到前臺，成本相對比較低。

小程式還提供了一個Webview預載入的效能，除了當前看到的Webview的檢視以外，在後臺還可以看到一個新的Webview，你切換的時候，因為Webview的初始化時間比較費效能的，在小程式這個級別，如果想達到比較順滑的體驗，需要做一些預處理。

小程式開發者在服務端會面臨的問題

除了保障小程式的流暢性以外，小程式還提供一些原生的元件，有過H5開發經驗的都知道，有時候寫比較長的列表和H5應用，和一些原生應用的對比很明顯，H5的表滑動的時候，特別是對一些老的安卓系統感覺很明顯。既然體驗達不到我的要求，就用原生元件代替Web元件。

小程式為什麼這麼快？剛才提到了安裝包快取，分包載入。小程式解決方案進化歷程，小程式是客戶端的一種新的創新，我猜小程式的開發者多半是web前端，或者是終端開發人員，他們可能對小程式的服務端有些欠缺。

我們總結了一下，小程式開發者在服務端會面臨一些問題，比如說要處理很多非業務性的邏輯。舉個例子來說，若處理一個使用者登陸，在小程式這裡要考慮會話怎麼儲存？你和客戶端的協議怎麼樣？你還要了解伺服器的應用知識，你的伺服器怎麼配，你的伺服器怎麼擴容，我的小程式爆款怎麼辦？對於一些有開發經驗的開發者來說不是問題，對於更多的客戶端的開發同學，這些都是很棘手的問題，對整個體系要了解。就拿登入舉個例子，下面這張圖是微信官方提供的登陸流程圖，這個圖看起來有點複雜，如果細緻瞭解就知道它要做什麼，有沒有更好的辦法呢？這個圖上的一些難點在這兒，微信登陸的時候，小程式發起的時候到伺服器端，怎麼做會話的協議？伺服器端怎麼存？微信提供了一個APP存在哪兒？還有使用者需要儲存的，你如果存就會帶來安全問題，用微信推薦的方案，你自己都要去處理。

第二個場景是Websocket通道服務，開發成本高；穩定性難保證；各種異常情況需要考慮，與業務耦合高。

Wafer解決方案

針對這些情況，我們在2016年的時候推出來了一個叫Wafer的解決方案，拿剛才的會話場景來說，我們叫wafer的會話伺服器，封裝複雜邏輯，兼顧安全性和便利性，只關注我們提供的幾個介面就行了。我們這個會話伺服器，也是支援獨立的，可以方便地做一個橫向的擴充套件。

針對剛才提到的Websocket，提出一個通道伺服器，它是一個paas級的應用，給每個開發者提供唯一的訪問地址，供開發者在程式裡面使用，小程式和信用伺服器，獲取websocket，然後是到業務伺服器。

總結起來有這幾點：配合SDK無需開發，直接使用；平臺提供穩定性和效能保障；自動實現斷線重連；獨立信用伺服器，訊息搬運工。

Wafer架構

這是當時wafer提的一個架構圖，因為我們wafer1當時提出來，是針對企業客戶的，比較看中安全性的擴充套件性，在這方面做了很多的工作，我們把通道伺服器單獨提出來，這個方案現在看起來有點問題，特別是在微信開放，當小程式開發個人註冊之後，它的問題就浮現出來了，比如說架構太不專業了，每一個節點都需要負載均衡，證書也需要自己處理。wafer的伺服器需要各個開發者自己去管理，程式碼需要自己去部署。

針對wafer1不足之處，我們在2017年上半年提出wafer2的解決方案，它是wafer1的簡化版，把wafer1做了一些簡化合並，兼顧的安全性和便利性，比如說它把會話伺服器和業務伺服器做了合併；在wafer1時代我們會讓使用者自行部署他的伺服器，現在在這兒我們進行託管式的管理，使用者可以購買自己的伺服器，但是不需要做伺服器端的配置，還會自動免費部署SSL證書，我們和微信做一個深度的合作，把wafer2的解決方案提進微信開發者空間裡去。

這個圖是微信開發者工具的介面，右上方有騰訊雲的一些功能和有一些解決方案，比如說上傳程式碼到開發環境，使用devtools啟動單步除錯等。

針對開發環境我們免費提供免費的域名，一鍵分配執行環境，通過一系列的繫結和關聯之後免費搭起小程式基本的框架。

系統支援針對Node.js遠端除錯，試工具整合，支援設定斷點，檢視變數值，它的功能很強大，用過的人都說好。

我們也把騰訊雲的一些特點和亮點，以及比較有特色的能力，通過API的形式暴露給小程式開發者，通過一個介面完成身份證識別的功能和圖片OCR的識別功能。

智慧語音我們通過API的形式暴露給開發者，你只需要調一個介面，就可以完成語音轉文字的功能。

操作過程

現在介紹一下操作過程，我們使用wafer2把騰訊雲帳號和小程式的帳號做一個關聯，建立一個小程式的號碼，有客戶程式碼和伺服器程式碼。客戶端程式碼和伺服器程式碼的地址，小程式編譯的時候就知道上傳到雲伺服器上，這些都是介面的功能，上傳以後還是支援安裝包，以及安裝後重啟的功能。

剛才提到了免費分配域名，需要在客戶端配置域名以後快速的搭建小程式的前後臺，按照這個流程來，整個過程大概10分鐘左右。我們也提供了多種demo，供大家瞭解騰訊雲的使用方法，用到上傳伺服器和上傳圖片的功能。

介紹完wafer2之後，我們就在想，我們還能夠做一些什麼？因為wafer2為開發者封裝了很多功能，比如說我們的登陸，還有通道伺服器，還需要開發者自己部署服務，雖然我們做了一些託管，但是你還要考慮伺服器的擴能，或者是負載均衡，我們在想登陸不用自己的伺服器就可以登陸，而且直接託管到我們的雲端，能不能不用自己寫伺服器的執行環境，直接放在我們的雲函式上面。這也是我們後面一段時間的研究方向。

Q/A

Q：剛才有提到通道服務，如果作為企業的話，資料放在私有云裡面，是不是理解所有的通道服務都放在騰訊雲上面？

A：對的，但是您的資料我們不會儲存的。

Q：剛才wafer2有一個伺服器存在的，可以登陸嗎？

A：不可以，自己部署伺服器有很多環境的問題。

Q：Node.js和PXP在網上也炒作很厲害，能不能在各個方面做一個比較嗎？最後給一個建議，到底哪個比較好一些？或者Node.js有沒有坑？

A：對於我來說，這兩種語言，我自己是沒有偏好的，我會看開發者的偏好，但是從能力上來說，其實我們在微信開發小程式裡面，提供了js的功能，這個問題沒有辦法正面回答你。

Q：如果這兩種方案，Node.js和pxp哪一種比較好？

A：Node.js它是一個比較新的技術架構，Pxp是偏向傳統的，要根據你的業務場景做分析。

更多分享資料，請戳下面的連結：

小程式雲端解決方案.pdf

問答
微信小程式如何與資料庫互動？
相關閱讀
黃文俊：Serverless小程式後端技術分享
施德來：有贊電商小程式的實踐
鄒偉：如何開發一款小遊戲

此文已由作者授權騰訊雲+社群釋出，原文連結：https://cloud.tencent.com/developer/article/1116776?fromSource=waitui