UNI-APP 是一個使用 Vue.js 開發所有前端應用的架構,開發者編寫一套代碼,可釋出到iOS、Android、Web(響應式)、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘/淘寶)、快應用等多個平台。
本文為大家講解如何采用雲開發官方JS-SDK,接入雲開發後端服務并支援UNI-APP全部端(不止于微信小程式)
雲開發官方提供的@cloudbase/js-sdk,主要用來做正常WEB、H5等應用(浏覽器運作)的雲開發資源調用,也是目前最為完善的用戶端SDK。
目前市面上大部分的輕應用、小程式包括移動應用APP都是采用JS來作為開發語言的,是以我們可以對TA進行輕微改造,就可以輕松使用在各種平台中。
但是單獨改造SDK包會有些許風險,比如在原SDK包更新時需要重新構造,就造成了無窮無盡的麻煩,改造成本相當大。
官方的産品小哥哥深知這種不适和痛苦,是以在@cloudbase/js-sdk 中提供一套完整的适配擴充方案,遵循此方案規範可開發對應平台的擴充卡,然後搭配 @cloudbase/js-sdk 和擴充卡實作平台的相容性。
不了解的小夥伴肯定會有些茫然,我來用淺顯的語言解釋一下,就是@cloudbase/js-sdk 将底層的網絡請求以及相關基礎需求以接口的形式暴露出來,我們按照平台的特殊API來補充這些接口,sdk就可以根據這些補充的接口,無障礙的運作在平台中了。
如果我們想在UNI-APP中使用@cloudbase/js-sdk ,底層網絡請求你需要來補充,因為sdk原本是适應浏覽器的,TA不知道UNI-APP怎麼對外發請求,是以你需要将uni.request 方法補充到TA暴露的接口中。補充完畢後,@cloudbase/js-sdk 就可以在UNI-APP中活潑的運作了。
我們将所有的uni方法全部補充到JS-SDK暴漏的接口中去,就形成了一個完整的擴充卡,我們将其成為uni-app擴充卡。
UNI-APP的整體接口都是公開透明的,我們在開發UNI-APP時也都遵照同一套接口标準。是以小編已經将uni-app擴充卡制作完畢,大家隻需要在使用時接入擴充卡就可以了。
我們在項目目錄main.js中引入雲開發JS-SDK,然後接入我們的UNI-APP擴充卡即可。
雲開發SDK在使用過程中,向雲開發服務系統發送的請求都會需要驗證請求來源的合法性。
我們正常 Web 通過驗證安全域名,而由于 UNI-APP 并沒有域名的概念,是以需要借助安全應用憑證區分請求來源是否合法。
登入雲開發 CloudBase 控制台,在安全配置頁面中的移動應用安全來源一欄:

點選“添加應用”按鈕,輸入應用辨別:uni-app(也可以輸入其他有标志性的名稱),需要注意應用辨別必須是能夠标記應用唯一性的資訊,比如微信小程式的 appId 、移動應用的包名等。
添加成功後會建立一個安全應用的資訊,如下圖所示:
我們需要儲存一下上圖中的版本(示例為1)、應用辨別(示例為uni-app)、以及點選擷取到的憑證(示例為demosecret)
在項目目錄中,我們将main.js中的init部分補全
如此,你就可以正常的進行雲開發的登入使用了。
需要注意以下4點:
你需要設定uni-app的各端安全域名為:request:tcb-api.tencentcloudapi.com、uploadFile:cos.ap-shanghai.myqcloud.com、download:按不同地域配置
使用此種方法接入雲開發是全端支援,并不會享有微信小程式生态的一些便利,微信小程式開發還是需要依賴正常請求調用過程(将雲開發作為伺服器來對待),但你可以判斷wx來使用wx.cloud來相容。
使用雲開發的匿名登入時,受各端實際情況影響,可能不能作為常久唯一登入id,需要根據自身業務建立統一賬戶體系,具體可使用自定義登入來進行。
UNI-APP支援WEB網頁端上線時,需要将網頁域名配置到雲開發安全域名中(防止WEB下載下傳檔案導緻跨域)
示例項目中已經基本建構了uni-app使用雲開發的各種流程代碼。
在頁面中進行匿名登入:
調用雲函數并收到傳回結果:
操作資料庫:
實時資料庫監聽:
上傳檔案(架構限制,WEB端無法操作):
下載下傳檔案(需要注意地域域名,配置安全域名):
将項目下載下傳後使用HBuilderX打開。
按照擷取移動安全憑證的指引,填寫至mian.js相應處。
打開目錄指令行,npm i執行安裝依賴。
打開雲開發控制台,開啟匿名登入。
建立一個預設的雲函數,名稱為test(邏輯内容直接傳回event即可)
建立一個資料庫,名稱為test(随便添加幾個記錄,設定權限為所有人可讀)
調整項目pages/index/index.vue中,21行代碼,在登入成功後調用相應函數。
以下是WEB端運作時展示:
uni-app擴充卡在util/adapter中,隻進行了簡單的測試,保證可用性,後續請關注官網擷取最新擴充卡依賴
此方法有别與uniCloud,是直接使用uni請求底層,依賴官方JS-SDK進行雲開發服務的互動處理,在使用時注意差別。
項目位址:https://github.com/AceZCY/UNI-for-CloudBase
雲開發(Tencent CloudBase,TCB)是騰訊雲提供的雲原生一體化開發環境和工具平台,為開發者提供高可用、自動彈性擴縮的後端雲服務,包含計算、存儲、托管等serverless化能力,可用于雲端一體化開發多種端應用(小程式,公衆号,Web 應用,Flutter 用戶端等),幫助開發者統一建構和管理後端服務和雲資源,避免了應用開發過程中繁瑣的伺服器搭建及運維,開發者可以專注于業務邏輯的實作,開發門檻更低,效率更高。
開通雲開發:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
産品文檔:https://cloud.tencent.com/product/tcb?from=12763
技術文檔:https://cloudbase.net?from=10004
技術交流加Q群:601134960
最新資訊關注微信公衆号【騰訊雲雲開發】