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


歡迎大家前往騰訊雲+社區,獲取更多騰訊海量技術實踐干貨哦~

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

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

今年可以說是小程序的元年,各類游戲、店商、旅游類的小程序如雨后春筍般涌現,我想在座的朋友大家或多或少都使用過小程序,那么一款火爆的小程序是如何開發出來的呢?今天我們邀請了來自騰訊雲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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM