爆款小程序是如何誕生的?

時間 2019-11-24

標籤程序如何誕生简体版

原文原文鏈接

歡迎你們前往騰訊雲 +社區，獲取更多騰訊海量技術實踐乾貨哦~前端

本文首發在雲+社區，未經許可，不得轉載。node

做者：黃榮奎|騰訊雲微信小程序解決方案負責人web

今年能夠說是小程序的元年，各種遊戲、店商、旅遊類的小程序如雨後春筍般涌現，我想在座的朋友你們或多或少都使用太小程序，那麼一款火爆的小程序是如何開發出來的呢？今天咱們邀請了來自騰訊雲Layabox和加推科技的五位技術專家爲你們一站式分享解析如何從0到1低成本甚至是0成本開發一款爆款的小遊戲，讓微信小程序開發真正實現觸手可及。數據庫

今天我給你們帶來的題目是騰訊雲微信小程序解決方案。我叫黃榮奎，是騰訊微信小程序方案的負責人，目前我正在負責小程序在騰訊雲上的解決方案，如何快速幫助開發者快速完成開發和上線。小程序

在去年的12月份我作一次分享的時候，大概有1/3的人有使用太小程序，如今應該會有更多。咱們簡單回顧一下微信小程序的發展歷程，微信小程序在9月份開始內測到2017年1月9日的時候微信小程序正式開放，到了你們真正所接受的是2017年12月28日，就是微信小遊戲開始開放的那一次，也就是你們所熟悉的跳一跳，那個時候微信小程序才被你們普遍的認識起來。微信小程序

簡單分享一下微信小程序的一個分佈，去年的時候微信小程序它的主要的來源來在於工具這一部分。相似於咱們在生活中經常使用的摩拜單車，滴滴打車，可是如今比較火的遊戲、社交已經趕超它的市場份額。api

那麼小程序它如何實現的呢？

先介紹一下小程序，這是官方給出的概念，小程序是一種新的開放能力，開發者能夠快速的開發一個小程序，小程序能夠在微信內被快捷的獲取和傳播，同時具備出色的使用體驗。緩存

那麼小程序實現的原理是什麼？

第一是它的渲染層，就是他的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和編譯的發佈。