黃榮奎：如何快速、便捷開發小程序

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

摘要：相信現在你們對微信小程序都不陌生，那麼小程序實現的具體原則究竟是怎樣的，開發一個簡單的小程序，咱們須要作哪些東西，11月18日騰訊雲技術沙龍北京站——釋放技術的想象之解碼騰訊雲軟件架構與應用，邀請到騰訊雲小程序解決方案負責人黃榮奎帶來的小程序雲上解決方案，教你一步開始小程序開發。

黃榮奎：你們好，今天由我來跟你們講一下小程序內部的一個框架，咱們騰訊雲在小程序開發過程當中作了哪些事情。首先自我介紹一下我叫黃榮奎，是騰訊這些小程序解決的一個一個負責人，咱們的目標是致力於提高開發者的效率，助力企業快速上雲。今天講的部分包括三個部分，第一塊是小程序核心架構的剖析。第二部分是新版小程序的介紹。第三部分是小程序雲上開發實踐。

2016年的1月11號提出微信小程序概念，9月21號開始內測，今年的1月9號正式開放，到目前已經快一年的時間，它已經滲透到咱們的各個行業。到目前爲止小程序已經覆蓋了200多個行業。小程序包含了不少的一些生活常見場景，好比說工具、零售、內容。工具包括一些經常使用的小工具還有咱們生活中常用到的，好比說摩拜單車；零售類的像京東這類咱們經常使用的電商平臺。什麼是小程序？官方的定義，是一種新的開放的能力，開發者能夠快速地開發一個小程序，能夠在微信內方便快捷傳播，同時具備出色的使用體驗。

小程序和咱們傳統的H5有一些區別，以前微信有推出很是火的公衆號系統，它更多的是藉助H5的能力實現的，小程序和H5有什麼差異？首先先說它們的共同點，H5和小程序均可以在微信內快速的傳播，也都是跨平臺的，能夠一次開發，在安卓上使用，也能夠在蘋果上使用。它的不一樣點在於小程序相對封閉，只能在微信裏面使用而不能在瀏覽器使用。同時小程序相對H5會有更快捷的體驗，它的體驗會更加的相似於APP，更快一些。

小程序是如何實現的，如何可以作到高性能的運行，提供一個更好的體驗？有沒有思考太小程序究竟是用Webview仍是native？一個是開發小程序最簡單的微信的小程序的一個結構，包括幾個方面，包括app.js、app.json、coefig.js等等，小程序的一個程序功能都是再生package裏實現的，同時會有開發過程當中使用到的基礎簿。這是一個最簡單的，也是一個小程序的目錄。它通過編譯以後會變成這樣樣子，你們能夠看到相對原來的目錄裏面它多了好幾個文件，好比說waservice.js這個文件、WAconsloe、WAWebview，還有app-config.js、app-service.js。這幾個文件究竟是什麼做用呢？waserviceb.js是邏輯控制的API，這個是在好比說提供給程序調用的接口還有一些基礎庫的使用，WAWeView就是小程序關於界面展示相關的一些做用，好比說經常使用的一些圖片展示是怎樣的，功能是怎樣的，都是在這裏面控制的。WAConsole是調試控臺的，在開發調試的時候是一個功能的東西。接下來是app橫config.js，這個是咱們的一個應用配置文件，會統一打造到這裏面來。app-service.js是一個業務邏輯，pape和frame是頁面框架，pages是頁面的樣式和模板。

首先咱們的WXML，也就是在應用程序裏面寫的模板，它會通過WXML編譯，編輯以後會到page-frame裏面去，WXSS在小程序開發過程當中寫的樣式的文件，也會經過編輯編成JS到page目錄下面，而後JS代碼會統一放到時候app-service這部分，json文件，會統一打包放在app-config文件裏去。

小程序核心框架分爲三個大塊，一塊是視圖層，也就是在整個頁面的展現，一塊是邏輯層，功能是什麼，或者和後臺的邏輯，都是在這層來作的。最重要的一部分就是它底層提供的功能，就是咱們點擊一下、掃描二維碼，或者調取一下它的硬件相關的一些接口，或者發起網絡請求，這些都是在native這層作的。

各個模塊到底都是如何使用的？首先你們看到page-franme.html，其實剛剛的那個問題大概有一個瞭解了，小程序究竟是使用webView來作的，仍是使用native來作的，這裏其實已經有答案了，就是使用的是webview來作的，由於它會咱們的文件都編譯程html，會把咱們的json文件統一使用JS，包裝到這裏面來。剛剛有講到過比較重要的好比說WAServic、Webview以及咱們的WAConsole。Webview是涉及展示相關的，咱們在開發文檔中會看到組件，好比說咱們的經常使用的展示相關的組件都是在這裏面編譯和實現的。Webview它包含幾個重要的部分， Conpont也就是咱們經常使用的圖片，Wapi這個的話，先是包含在這裏，可是不直接對外提供使用，同時它也進行這些展示相關的控制，render以及事件。固然Webview它要調用小程序原生的native方法的話就必須使用微信的這個JSBridge，經過這個來進行通訊的，同時還有一些RC方法。

WAservice這裏的功能和那個有一些區別，這裏都是業績邏輯相關的梳理，好比說Module的定義，而後它的一些方法，好比說APP，或者是試件都是在這裏定義的。另一個很是重要的WAservice裏提供的就是微信XX.API，或者是調取二維碼掃描的功能，都是經過這個接口實現的。也必需要有微信JSBridge來和微信的Native進行通訊。這裏也包含了相關的一些接口。

各個模塊之間是如何進行通訊的？首先講一下在界面和業務邏輯之間是如何進行通訊的？好比說咱們點擊了一個登陸的操做，點擊了以後會調取後臺的邏輯，具體的交互過程是這樣的，首先經過View也能夠展示，好比說一個登陸的按鈕，這個時候他要發起一個登陸事件的話，首先要結合第一步，message到JSBridge，JSBridge會經過Webview，而後再結合Native方法，把這個事件成列到Native裏面，這上面的和下面的其實同樣的，它的信息流經過Native再經過JSBCore傳遞到咱們的JSBridge，而後再經過這個JSBridge傳遞給咱們的service，這樣咱們的業務就會搜到消息，這樣service接受了消息以後會進行一個處理，通知咱們的View，這個時候它也是同樣的，接受了消息處理完了以後會發出一個消息，給JSBridge，而後再經過咱們的JSCore，到Native，就是微信小程序原生的東西。而後再經過native到View，而後把view展現的結果經過JSBridge去告訴到咱們的view，而後View會作界面展現的更改。這個就是剛剛講的視圖，用戶的一個點擊操做，到了組件，裏面指View，再到JSBridge到view和Native，而後再到service，而後在一步一步傳到組件裏面。

用戶在調用小程序原生方法的時候，會是怎樣的一個數據流呢？能夠看到從咱們的View，從界面的展現上，好比說用戶點擊了一個掃描二維碼的操做，這個時候會發送一個消息到JSBridge，而後到view，而後再到Native，Native在收到消息以後，會把這些返回的結果再傳遞迴給View，若是是咱們在service中傳遞了這樣的方法，它的信息留也是相似的。

有的時候小程序在進行一些特殊操做的時候會有一些消息通知到咱們的服務，好比說微信被隱藏掉了，關閉了或者打開了，它會service發佈一些ON事件，就是在這個地方分裝了ON一系消息，它會從Native直接到view，而後再經過JSBridge通知到咱們的View層，或者通知到咱們的service。

小程序爲何比H5要呢？首先安裝包的緩存，小程序和H5的最大的區別是所須要的資源都下載下來，可是這個不能超過2兆，這是微信的限制，這樣它會稍微快一些。第二個它能夠預加載多個WebView，這個時候就是說當我從A傳到B點的時候，我並非立刻去從新申請一個view，而是把view展示出來，固然這裏的數量是有限制的，因此業務的層級最好不要超過5個。第三個同時它還作了頁面加載的優化，總體來看小程序會比H5更快一些。

再跟你們介紹一下小程序須要準備些什麼東西。前面的展示只是不多的一部分，真正複雜的是咱們後臺的相關的服務，好比說咱們要去買一個域名，還必須申請一個證書，因小程序只是在安全的請求，同時要弄一臺本身的服務器，數據庫，還要完成發佈一些東西。存在的問題，就是部署耗時、後臺代碼部署不方便、開發調試不直觀、花更多的時間在框架上而不是直接開發本身的業務邏輯。

針對這些問題，如何能讓開發者更加快捷地開發小程序，咱們和微信聯合作了一個解決的方案。在右上角能夠看到有一個騰訊的標識，在這裏能夠完成一些更加快捷方便的操做。一鍵自動配置可運行後臺的環境。第二個是後臺代碼編寫。第三是一鍵上傳代碼自動部署，第四遠程調試。

首先一鍵部署後臺環境，用戶開通了一個騰訊賬號以後，會自動幫用戶分配一個域名、證書，同時會分配臨時使用的一臺服務器給用戶，還包括數據庫，以及相關的Demo都在這裏，用戶能夠點擊上傳這一系列的東西都是自動生成的。這裏分配的東西其實包含不少，首先域名爲了安全其實引入了雲監控和8GP高防，在後臺會幫用戶申請域名，分配一個臨時用的域名，經過負載均衡鏈接到後臺的服務器，同時也會幫用戶申請一個HTTPS的證書，把這些東西都部署好。固然在後臺業務服務器的基礎上還有更多的一些服務，好比說圖像識別、CDN、聲音識別，基於騰訊的Pass服務的能力均可以在這裏使用。

客戶端後臺代碼的編寫，你們若是有小程序開發經驗的人能夠知道，原來在客戶端只能編寫前端的代碼，可是在新工具改版了以後這裏能夠看到有兩個底層的目錄，一個是Client，一個是server。Client就是原來的小程序，就是說展示相關的東西，一些前臺交互相關的東西。server就是後臺代碼的目錄，目前咱們支持兩種語言，一種是note js，一種是kfp，在裏能夠直接進行代碼的編寫。編寫以後在這裏能夠點擊上傳測試代碼，就能夠一鍵把本身編寫的代碼上傳到服務器。

其實這裏能夠很快的設置一個部署的過程，能夠很快的完成代碼的部署，以及服務的重啓，對應的小程序這裏就能夠體現到對應的功能了。另一個問題就是調試，以前調試一般都是在後臺的服務器上進行打LOG，經過看日誌的方式，在微信這邊對notejs作了一個優化，可使用遠程調試的功能，只要點擊啓動調試，在前端若是有後臺過來，好比說這裏點登陸這裏再調試的話就能夠看到它斷點到這裏來了，在這裏有過開發經驗的人均可以知道，在這裏能夠進行變量察看以及斷點的設置，以及環境變量的更改，能夠方便地進行後臺代碼的調試。

同時一個基本的Demo，把後臺基本的能力進行了分裝，分到這裏就造成了小程序的解決開發方案，包括一些基本的功能也包括一些高級的功能，其中最基本的包括登陸、圖片上傳、數據庫操做這些基本的，比較複雜的包括信道服務、圖片識別，後面的話還有的音頻識別、語音識別等等，全部的代碼均可以在這上面，它是一個開源的項目。

在雲上小程序還有哪些能力？這些是分裝的比較高級的實用的接口，其中包括Websocket服務，圖片鑑黃、語音識別，還有剛剛提到過的有視頻還有直播相關的一些東西，其實在這裏均可以找到解決方案的。首先講一下Websocket，是一個外部端的長鏈接的服務，它主要用於一些實時的場景，好比說遊戲，好比說實時的場景，還有一些其餘的實時的服務，對時間要求比較高的。若是是本身搭建這個Websocket的話，就會存在一些問題及長時間佔用服務器資源，各類異常狀況須要考慮、斷線重連、異常網絡，缺少統計數據，對鏈接的服務使用狀況，調試不方便。針對這個咱們推出了這樣的一個Websocket服務的能力給到你們。

小程序若是是本身搭建的話它只存在小程序和用戶服務器之間這樣的一個雙向的通道，可是用了咱們的Pass服務能力的以後，它鏈接的鏈路就變了，就變成從小程序和服務器進行長鏈接的話，它首先要向業務服務器請求一個長鏈接的地址，提供了滯後小程序後面的鏈接就和信道服務創建了一個長期的鏈接，中間全部的數據交互和消息的發佈都是經過信道服務和業務服務器之間進行中轉，也就是業務服務器不須要和小程序直接鏈接，只須要處理從信道服務從這裏發來的程序就能夠了。

另一些比較高級的應用，好比圖像識別OCR，這是騰訊雲提供的一個服務能力，也能夠提高到SDK裏面去了。目前的騰訊AI圖像識別已經在不少的業務中使用到了，準確率達到99%點多。

相關閱讀

 

爸爸去哪兒玩轉黑科技：快來測測本身和老爸有多像？

研究 AI 識別同性戀竟受到死亡威脅！論文做者回應以下

人臉對齊：ASM (主動形狀模型)算法

 

此文已由做者受權騰訊雲技術社區發佈，轉載請註明原文出處

原文連接：https://cloud.tencent.com/community/article/717276?fromSource=gwzcw.631414.631414.631414