本文首發在雲+社群，未經許可，不得轉載。
作者：黃榮奎|騰訊雲微信小程式解決方案負責人
今年可以說是小程式的元年，各類遊戲、店商、旅遊類的小程式如雨後春筍般湧現，我想在座的朋友大家或多或少都使用過小程式，那麼一款火爆的小程式是如何開發出來的呢？今天我們邀請了來自騰訊雲Layabox和加推科技的五位技術專家為大家一站式分享解析如何從0到1低成本甚至是0成本開發一款爆款的小遊戲，讓微信小程式開發真正實現觸手可及。
今天我給大家帶來的題目是騰訊雲微信小程式解決方案。我叫黃榮奎，是騰訊微信小程式方案的負責人，目前我正在負責小程式在騰訊雲上的解決方案，如何快速幫助開發者快速完成開發和上線。
在去年的12月份我做一次分享的時候，大概有1/3的人有使用過小程式，現在應該會有更多。我們簡單回顧一下微信小程式的發展歷程，微信小程式在9月份開始內測到2017年1月9日的時候微信小程式正式開放，到了大家真正所接受的是2017年12月28日，就是微信小遊戲開始開放的那一次，也就是大家所熟悉的跳一跳，那個時候微信小程式才被大家廣泛的認識起來。
簡單分享一下微信小程式的一個分佈，去年的時候微信小程式它的主要的來源來在於工具這一部分。類似於我們在生活中常用的摩拜單車，滴滴叫車，但是現在比較火的遊戲、社交已經趕超它的市場份額。
那麼小程式它如何實現的呢？
先介紹一下小程式，這是官方給出的概念，小程式是一種新的開放能力，開發者可以快速的開發一個小程式，小程式可以在微信內被快捷的獲取和傳播，同時具有出色的使用體驗。
那麼小程式實現的原理是什麼？
第一是它的渲染層，就是他的Webviews，第二個是它的邏輯層，就是我們寫業務邏輯實現登入功能和支付功能，第三個可以理解為微信原生的能力。
那麼它是如何實現這一部分能力呢？
Webviews的話主要負責渲染，底層微信提供更多的底層的能力。我們可以看到微信把很多的豐富的原生客戶端以及它自己的這些能力提供到了給了開發者。比如說網路，發起網路請求，儲存和下載，儲存包括檔案的讀寫、音視訊的讀寫，登入是微信版，形成關係連。元件就是我們常用的元件，包括這裡面還有硬體給到開發者，包括音視訊的錄製、攝像頭，還有拍照、掃碼等。
那麼它中間是通過什麼進行訊息的傳遞及呼叫的呢？
可以看到這裡是通過事件以及返回資料來進行傳遞的。當使用者它在介面上有一些操作行為的時候，就會觸發一些事件，給到原生Webviews，再到業務邏輯。
那麼小程式如何渲染出來的？
有過小程式開發者經驗的都知道，我們寫了一個叫WXM2的東西，定義成Javascript，和業務一起打包形成小程式。
這是小程式的一個事件處理的方法，可以看到裡面有Publish。Publish是Servive傳送資料給View，Service監聽View事件，Service和View觸發Native層，呼叫WX.api。
那麼小程式它為什麼會這麼快？
- 第一個是它有一個安裝包快取，剛才有提到每一個小程式開發完成之後都會進行一個編譯，形成小程式包。對比一下我們之前的一些開發方式，比如說H5的體驗，會有很大的不一樣的感覺，H5是TM2，通過請求下載到使用者的裝置上面，然後再進行渲染。如果出現網路比較差的情況，比如說3G、4G訊號不太好的時候，都會出現白屏的情況。但是小程式不一樣，它會生成程式包，可以快取在使用者的裝置上面，這樣使用者在下一次使用的時候就不會重複下載。也就不會出現白屏等情況。當然對於小程式的安裝包的大小也是有限制的，不能特別大，通常官方之前要求是不能大於2Mb，不知道現在有沒有提升。
- 第二個是Webview的介面，當進入了小程式的時候，並不是點選一下才生成一個Webview，生成Webview是有時間消耗的。當我進入到小程式的主頁的時候會生成多個Webview，顯示時只需展示Webview，而不用再進行生成，這樣載入速度會到很大的提升。
- 第三，Native元件，在這個頁面裡是原生的元件，以及裡面的一些圖片都是原生的，從而加快啟動速度。當然它還使用了其他的，比如說分包載入之類的。
我們來比較一下各種開發方式，我們對小程式的體驗以及它的開發難度及對使用者使用上的消耗做一個對比。之前H5是我們想到的可以跨平臺的解決方案，從開發來講H5和小程式只需要瞭解前端開發就可以開發了。但是原生開發APP就比較大，而且是分平臺的，IOS和安卓是不同的開發語言。如果一個團隊開發一個小程式必須有IOS團隊和安卓團隊，開發成本較高。
從使用者體驗上來講，小程式的體驗只能說較好，如果針對原生APP來對比還是會差一些。但是對比外圍其他APP的話，小程式的速度、效能會快很多。而且從能力上來講的話，由微信提供的一些功能，小程式可以操作一些硬體，但是外圍APP就有點吃力。原生APP支援最好，可以操作很底層的硬體。小程式可以通過查詢或以附近的這種形式推薦，所以它的傳播能力更好，同時支援朋友圈進行分享傳播。相對原生APP傳播能力就很弱。針對某些使用場景的話，原生APP體驗是非常差的，小程式非常快。比如說我在路上看到摩拜單車的話，我會直接用我的小程式掃一下。但是APP你還需要下載。
騰訊雲開發者工具解決方案
如果要自己進行小程式的開發的話，通常需要有自己的伺服器、運營也需要給它配置一些證照才進行開發，所以每一個開發者要了解伺服器運維的知識。同時部署伺服器程式碼不方便，伺服器端程式碼除錯不直觀，更多的時候花費在周圍環境的部署，而不是把更多的心思放在業務開發上面。
針對這種情況我們做了這麼一個解決方案Wafer1.0，它的目的是解決伺服器部署的問題，把伺服器的均衡、伺服器的擴容提前處理好，把業務的基礎服務程式碼在伺服器裡面寫好，同時擁有基礎的會話服務，這是我們早期的解決方案。但是這種解決方案也存在一定的問題，需要使用者瞭解原理是什麼樣的，伺服器程式部署也要自己弄，架構太過專業化，不適合個人開發者，程式碼除錯也不方便。
我們跟微信做了深度的合作，開發出了我們的Wafer2，Wafer1和Wafer2區別很大，尤其是開發者使用者可以上傳伺服器端的程式碼，可以直接上傳程式碼到開發環境和生產環境。開發設定環境和生產環境、域名、證照還有資料庫都是系統提前準備好的。使用者把程式碼寫好，就可以直接上傳程式碼。我們Wafer2也是整合了騰訊雲現成的能力，比如說通道服務、物件儲存，永珍優圖、智慧語音等等。
可以看到Wafer2其實有很多新特性，包括程式碼一鍵上傳，您不需要了解伺服器端知識，只需要瞭解開發環境和生產環境即可。我們的開發和線上環境是分離的，我們能做到一鍵簽發、部署SSL證照。同時Node.js開發環境支援遠端除錯，這一套都是免費的，歡迎大家體驗。
這個是我們現在在微信開發者工具裡面的能力，右上角有一個騰訊雲的小圖示。有了這個能力您可以直接上傳程式碼到開發環境，然後啟動彈幕除錯，可以在後臺可以看到當前的環境變數，重啟服務、停止服務，還可以上傳程式碼到生產環境去。
騰訊雲小程式解決方案已經完美的解決了前面的兩個問題（需要您一定伺服器運維知識，部署伺服器程式碼不方便的問題）那麼還剩下兩個問題，一個是伺服器端程式碼除錯不直觀，針對這個問題我們和微信做了遠端除錯的能力，當然這是針對與Nods.js版本的。有Nods.js開發經驗的同學肯定都不會陌生。另一個是遠端除錯，這裡的程式碼都是伺服器的程式碼，可以看到斷點以及檢視環境變數。
Wafer2除了這些特點之外，還將使用者的框架做好了，使用者只需使用Wafer2繫結騰訊雲賬號和小程式的賬號，然後建立小程式的專案。
建立完成後，我們需要點選這裡上傳測試程式碼，這時您本地的程式碼就被上傳到服務端，這裡我們也給使用者分配好了域名，使用者只要在小程式裡面把這個給配置好就可以來進行訪問了。我們提供了蠻多的能力，包括快速節點介面、登入、語音識別等等這些能力我們都提供了，可以保證使用者在開發的時候方便的使用到。
那麼在這個基礎上我們有做哪些東西呢？
- 第一個是聊天室小程式，這是基於我們自己Sdk做的聊天室的功能，主要使用到Websocket的服務。聊天主要用到的是資訊的互動，雙方通訊，Websocket提供的一個能力，小程式登入會向伺服器獲取地址，其他由Paas提供當前的使用者需不需要跟業務伺服器進行連線，還是需要跟當時的伺服器進行連線。這樣做的好處是可以讓我們開發的時候不需要更多的關注Websocket的實現。而且websocket有一定的效能消耗的，如果使用Paas可以免去這個效能消耗。我們也可以對異常的情況進行監測，比如說斷線或者異常的情況進行相容，這些能力都在我們的SDK裡面，大家使用的時候瞭解一下。
- 第二是影象識別，可以看到這是由騰訊雲提供的永珍優圖能力，如身份證識別：使用者上傳身份證之後可以識別上面的姓名、出生年月、性別以及地址等，當然這只是騰訊雲提供的一部分的能力。優圖還可以提供了活體校驗，大家後續可去了解。本文暫不涉及。
除了這些之外，我們接下來還要做哪些東西呢？
目前的版本控制的現狀是這樣的，使用者在開發小程式的時候，程式碼是在客戶端進行編輯的，儲存是使用者自己儲存的，當然這就會帶來很多弊端，比如說程式碼的版本管理，版本對比，很多情況都不能在客戶端完成。使用者在開發完成之後需要部署伺服器的話，需要自己去完成程式碼的部署。
另一個弊端就是初始化專案比較複雜，版本控制和服務端沒有關聯，無法回退程式碼，開發者工具也不支援GIT操作。針對這種情況我們和微信也做了進一步的合作。結合騰訊雲的TGIT，也就是騰訊內部使用的程式碼管理。然後在部署方面我們使用了程式整合，就是可以直接用開發者工具釋出到伺服器上，這個伺服器可以是使用者自己的伺服器，也可以其他的伺服器。
有了這些能力的，我們就可以快速的一鍵初始化程式碼，開發者可以快速檢視、對比和回滾程式碼，精確釋出和回滾程式碼，然後TGIT提供免費私有的倉庫。
目前我們小程式開發者工具支援了有GS和PSP，後面我們可以支援到C++、Java和編譯的釋出。
融合了這種持續繼承之後它的優勢，可以釋出前可以預編譯程式碼，支援編譯語言，支援自定義持續整合，可以部署釋出前執行，就是這些，謝謝大家。
Q/A：
Q：剛才說的釋出的時候有生產和開發，我自己配置需要兩臺伺服器嗎？一個是開發一個是生產。
A：這個不需要你自己手動去做，你只需要繫結騰訊雲和小程式的賬號就可以了，這個伺服器是免費生成的。
Q：這個伺服器我們不需要要費用嗎？
A：目前開發是免費的，生產環境可能最近是收費的，之前是免費的。
Q：我可以選用其他的服務商去提供的伺服器嘛？
A：可以需要自行部署，我們會在後面的運營、釋出的話，允許使用者自己去部署伺服器。
Q：我如果要用小程式得多個接服務的時候，我可以有一臺伺服器嗎？那個伺服器可以支援多各小程式嗎？
A：可以，需要自己在程式碼上做一些相容。
Q：我們們現在有方便的示例或者SDK之類的？
A：暫時還沒有。
Q：現在就需要自己去調整程式碼邏輯？
A：OK，沒錯。
Q：你好，IOS版本的小程式跟安卓小程式，它的開發語言的話是一樣嗎？
A：目前小程式它其實是跨平臺的，也就是說寫個程式碼的話只是一份，它可以同時相容IOS和安卓平臺，它的語言是nodejs這些是更加偏向於前端的開發。
Q：問一個永珍優圖的問題，剛才你講可以識別身份證，能不能識別我們自定義的一些，就是列印出來的病例是否可以識別？
A：目前它有印刷體識別，身份證識別只是其中一個，我可以幫你聯絡一下優圖的同事，有沒有這個能力。
Q：我們們OCR進行身份證識別的時候，是直接把圖片上傳的嗎？
A：是，直接上傳上來，給一個連結地址，介面就可以識別到了。
Q：之前我有嘗試到AI，需要把圖片轉成，就是了解了一下內部小程式是可以這樣轉的，社群裡有人說沒有實現這個功能，你們以後會有對這個功能進行對外開放嗎？
A：轉成64的話應該有蠻多方法的，如果不開放的話，你可以通過開放介面。
問答
相關閱讀
此文已由作者授權騰訊雲+社群釋出，原文連結：https://cloud.tencent.com/developer/article/1084417?fromSource=waitui
