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