UNI-APP使用雲開發跨全端開發實戰講解

UNI-APP 是一個使用 Vue.js 開發全部前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。

本文爲你們講解如何採用雲開發官方JS-SDK，接入雲開發後端服務並支持UNI-APP所有端（不止於微信小程序）

JS-SDK和UNI-APP適配器

1.JS-SDK和適配器

雲開發官方提供的@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適配器。

2.UNI-APP適配器

UNI-APP的總體接口都是公開透明的，咱們在開發UNI-APP時也都遵守同一套接口標準。因此小編已經將uni-app適配器製做完畢，你們只須要在使用時接入適配器就能夠了。

咱們在項目目錄main.js中引入雲開發JS-SDK，而後接入咱們的UNI-APP適配器便可。

import cloudbase from '@cloudbase/js-sdk'
import adapter from 'uni-app/adapter.js'

cloudbase.useAdapters(adapter);

cloudbase.init({
 env: '',//雲開發環境ID
 appSign: '',//憑證描述
 appSecret: {
  appAccessKeyId: 1,//憑證版本
  appAccessKey: ''//憑證
 }
})

移動應用登陸憑證

雲開發SDK在使用過程當中，向雲開發服務系統發送的請求都會須要驗證請求來源的合法性。

咱們常規 Web 經過驗證安全域名，而因爲 UNI-APP 並無域名的概念，因此須要藉助安全應用憑證區分請求來源是否合法。

登陸雲開發 CloudBase 控制檯，在安全配置頁面中的移動應用安全來源一欄：

點擊「添加應用」按鈕，輸入應用標識：uni-app（也能夠輸入其餘有標誌性的名稱），須要注意應用標識必須是可以標記應用惟一性的信息，好比微信小程序的 appId 、移動應用的包名等。

添加成功後會建立一個安全應用的信息，以下圖所示：

咱們須要保存一下上圖中的版本（示例爲1）、應用標識（示例爲uni-app）、以及點擊獲取到的憑證（示例爲demosecret）

在項目目錄中，咱們將main.js中的init部分補全

import cloudbase from '@cloudbase/js-sdk'
import adapter from 'uni-app/adapter.js'

cloudbase.useAdapters(adapter);

cloudbase.init({
 env: 'envid',//雲開發環境ID，保證與你操做登陸憑證一致
 appSign: 'uni-app',//憑證描述
 appSecret: {
  appAccessKeyId: 1,//憑證版本
  appAccessKey: 'demosecret'//憑證
 }
})

如此，你就能夠正常的進行雲開發的登陸使用了。

須要注意如下4點：

1. 你須要設置uni-app的各端安全域名爲：request：tcb-api.tencentcloudapi.com、uploadFile：cos.ap-shanghai.myqcloud.com、download：按不一樣地域配置
2. 使用此種方法接入雲開發是全端支持，並不會享有微信小程序生態的一些便利，微信小程序開發仍是須要依賴正常請求調用過程（將雲開發做爲服務器來對待），但你能夠判斷wx來使用wx.cloud來兼容。
3. 使用雲開發的匿名登陸時，受各端實際狀況影響，可能不能做爲常久惟一登陸id，須要根據自身業務創建統一帳戶體系，具體可以使用自定義登陸來進行。
4. UNI-APP支持WEB網頁端上線時，須要將網頁域名配置到雲開發安全域名中（防止WEB下載文件致使跨域）

示例代碼詳解

示例項目中已經基本構建了uni-app使用雲開發的各類流程代碼。

在頁面中進行匿名登陸：

// index.vue
import cloudbase from '@cloudbase/js-sdk'
 export default {
  data() {
   return {
    title: '登陸中'
   }
  },
  onLoad() {
   cloudbase.auth().anonymousAuthProvider().signIn().then(res => {
    this.title = '匿名登陸成功'
   }).catch(err => {
    console.error(err)
   })
  }
 }

調用雲函數並收到返回結果：

import cloudbase from '@cloudbase/js-sdk'
export default {
 methods: {
  call: function() {
   cloudbase.callFunction({
    name: "test",
    data: {
     a: 1
    }
   }).then((res) => {
    console.log(res)
   });
  }
 }
}

操做數據庫：

import cloudbase from '@cloudbase/js-sdk'
export default {
 methods: {
  database: function() {
   cloudbase.database().collection('test').get().then(res => {
    console.log(res)
   })
  }
 }
}

實時數據庫監聽：

import cloudbase from '@cloudbase/js-sdk'
export default {
 methods: {
  socket: function() {
   let ref = cloudbase.database().collection('test').where({}).watch({
    onChange: (snapshot) => {
     console.log("收到snapshot", snapshot);
    },
    onError: (error) => {
     console.log("收到error", error);
    }
   });
  }
 }
}

上傳文件（框架限制，WEB端沒法操做）：

import cloudbase from '@cloudbase/js-sdk'
export default {
 methods: {
  upload: function() {
   uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function(res) {
     console.log(res.tempFilePaths[0])
     cloudbase.uploadFile({
      cloudPath: "test-admin.png",
      filePath: res.tempFilePaths[0],
      onUploadProgress: function(progressEvent) {
       console.log(progressEvent);
       var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      }
     }).then((result) => {
      console.log(result)
     });
    }
   });
  }
 }
}

下載文件（須要注意地域域名，配置安全域名）：

import cloudbase from '@cloudbase/js-sdk'
export default {
 methods: {
  download: function() {
   cloudbase.downloadFile({
    fileID: "cloud://demo-env-1293829/test-admin.png"
   }).then((res) => {
    console.log(res)
   });
  }
 }
}

部署步驟

• 將項目下載後使用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 最新資訊關注微信公衆號【騰訊云云開發】