引出(目標(biāo)應(yīng)用場景)
我們在做一些深度學(xué)習(xí)圖像算法開發(fā)時,為了更好的將算法效果展示出來,經(jīng)常需要開發(fā)一些演示Demo應(yīng)用,如在移動端運行的Android App,但安卓App的開發(fā)由于設(shè)備系統(tǒng)碎片化的問題需要在UI適配與算法模型部署上編寫大量的代碼,開發(fā)上既費時費力又存在各種兼容性問題,從而導(dǎo)致應(yīng)用體驗效果大打折扣。
基于這樣的問題,我們想到了另外一種拋棄離線算法調(diào)用的辦法——在線C/S交互式應(yīng)用開發(fā)(類似于百度、騰訊、阿里的開放平臺)。C代表Client(客戶端),S代表Server(服務(wù)端),也就是UI處理與底層處理分離的方式,兩端的連接交互媒介就是Http網(wǎng)絡(luò)請求。像這里的算法演示在C端主要實現(xiàn)界面顯示、交互、發(fā)送請求與圖像繪制,S端主要是實現(xiàn)請求接收與返回、算法推理。C端主要包含移動端App/網(wǎng)頁/小程序,S端就是后臺算法運行服務(wù)器,本文主要介紹C端應(yīng)用(微信小程序)的開發(fā)。
小程序簡介
JS API
小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時具有出色的使用體驗。小程序并非憑空冒出來的一個概念。當(dāng)微信中的WebView逐漸成為移動Web的一個重要入口時,微信就有相關(guān)的JS API了。
JS-SDK
2015年初,微信發(fā)布了一整套網(wǎng)頁開發(fā)工具包,稱之為JS-SDK,開放了拍攝、錄音、語音識別、二維碼、地圖、支付、分享、卡券等幾十個API。給所有的Web開發(fā)者打開了一扇全新的窗戶,讓所有開發(fā)者都可以使用到微信的原生能力,去完成一些之前做不到或者難以做到的事情。JS-SDK是對之前的 WeixinJSBridge 的一個包裝,以及新能力的釋放, 并且由對內(nèi)開放轉(zhuǎn)為了對所有開發(fā)者開放,在很短的時間內(nèi)獲得了極大的關(guān)注。從數(shù)據(jù)監(jiān)控來看,絕大部分在微信內(nèi)傳播的移動網(wǎng)頁都使用到了相關(guān)的接口。
JS-SDK 解決了移動網(wǎng)頁能力不足的問題,通過暴露微信的接口使得Web開發(fā)者能夠擁有更多的能力, 然而在更多的能力之外,JS-SDK的模式并沒有解決使用移動網(wǎng)頁遇到的體驗不良的問題。用戶在訪問網(wǎng)頁的時候,在瀏覽器開始顯示之前都會有一個白屏的過程,在移動端,受限于設(shè)備性能和網(wǎng)絡(luò)速度,白屏?xí)用黠@。微信團隊把很多技術(shù)精力放置在如何幫助平臺上的Web開發(fā)者解決這個問題。因此設(shè)計了一個JS-SDK的增強版本,其中有一個重要的功能,稱之為“微信Web資源離線存儲”。
微信Web資源離線存儲是面向 Web 開發(fā)者提供的基于微信內(nèi)的 Web 加速方案。通過使用微信離線存儲,Web開發(fā)者可借助微信提供的資源存儲能力,直接從微信本地加載Web資源而不需要再從服務(wù)端拉取,從而減少網(wǎng)頁加載時間,為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁瀏覽體驗。每個公眾號下所有Web App累計最多可緩存 5M 的資源。
小程序的由來
微信Web資源離線存儲的設(shè)計有點類似HTML5的 Application Cache,但在設(shè)計上規(guī)避了一些 Application Cache的不足。在內(nèi)部測試中,我們發(fā)現(xiàn)離線存儲能夠解決一些問題,但對于一些復(fù)雜的頁面依然會有白屏問題,例如頁面加載了大量的CSS或者是 JavaScript文件。 除了白屏, 影響Web體驗的問題還有缺少操作的反饋,主要表現(xiàn)在兩個方面:頁面切換的生硬和點擊的遲滯感。
微信面臨的問題是如何設(shè)計一個比較好的系統(tǒng),使得所有開發(fā)者在微信中都能獲得比較好的體驗。這個問題是之前的JS-SDK 所處理不了的,需要一個全新的系統(tǒng)來完成,它需要使得所有的開發(fā)者都能做到:
- 快速的加載
- 更強大的能力
- 原生的體驗
- 易用且安全的微信數(shù)據(jù)開放
- 高效和簡單的開發(fā)
小程序開發(fā)與普通網(wǎng)頁開發(fā)的區(qū)別
小程序的主要開發(fā)語言是 JavaScript , 小程序的開發(fā)同普通的網(wǎng)頁開發(fā)相比有很大的相似性。 對于前端開發(fā)者而言, 從網(wǎng)頁開發(fā)遷移到小程序的開發(fā)成本并不高, 但是二者還是有些許區(qū)別的。
| 區(qū)別項 | 小程序 | 網(wǎng)頁 |
|---|---|---|
| 渲染層與邏輯層 | 獨立 | 互斥 |
| 邏輯層 | 不支持DOM API/BOM API/NodeJS | 支持DOM API/BOM API/NodeJS |
| 運行環(huán)境 | Android/IOS/小程序開發(fā)者工具 | 各種瀏覽器 |
小程序開發(fā)準(zhǔn)備工作
申請帳號
進入微信公眾平臺點擊小程序根據(jù)指引填寫信息和提交相應(yīng)的資料, 就可以擁有自己的小程序帳號。在這個小程序管理平臺, 你可以管理你的小程序的權(quán)限, 查看數(shù)據(jù)報表, 發(fā)布小程序等操作。



配置AppID
登錄小程序后臺 , 我們可以在菜單 “開發(fā)”-“開發(fā)設(shè)置” 看到小程序的 AppID 了 。

安裝開發(fā)工具
前往 開發(fā)者工具下載頁面 , 根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進行安裝, 有關(guān)開發(fā)者工具更詳細的介紹可以查看 《開發(fā)者工具介紹》。
打開小程序開發(fā)者工具, 用微信掃碼登錄開發(fā)者工具, 準(zhǔn)備開發(fā)你的第一個小程序吧!


至此,我們已做好了算法演示Demo的C端開發(fā)準(zhǔn)備工作,后面便可以進行具體的開發(fā)工作了。