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
最新資訊關注微信公眾號【騰訊雲雲開發】