uni-app + Cloudbase——uni-app 專案中如何使用騰訊雲開發後端服務

蜜瓜發表於2021-12-21

APPCloud後端

1 基本介紹

uni-app 是一個基於 Vue.js 的跨端開發框架，一套程式碼可以釋出到 App、小程式、Web 等不同平臺

騰訊雲開發平臺 Cloudbase 提供的 @cloudbase/js-sdk 可以讓開發者在 Web 端（例如 PC Web 頁面、微信公眾平臺 H5 等）使用 JavaScript 訪問 Cloudbase 服務和資源。

但是 @cloudbase/js-sdk 只支援 Web（瀏覽器環境）的開發，不相容其他類 Web 平臺（比如小程式）。因為這些平臺在網路請求、本地儲存、平臺標識等特性上與瀏覽器環境有明顯差異。

@cloudbase/js-sdk 不認識這些差異，比如@cloudbase/js-sdk不知道這些平臺是怎麼傳送網路請求的，因此我們不能在開發類 Web 應用時直接使用@cloudbase/js-sdk。

針對這些差異，@cloudbase/js-sdk提供了一套完整的適配擴充套件方案，遵循此方案規範開發對應平臺的介面卡，就可以實現平臺的相容性

對於 uni-app，不同於瀏覽器，它基於 ECMAScript 擴充套件了獨有的 uni 物件，它也不能直接使用@cloudbase/js-sdk，因為它在網路請求、本地儲存等特性上和瀏覽器環境也存在明顯差異

如果想讓 uni-app 開發的小程式和 PC Web 應用使用同一套雲開發後端服務，就需要開發針對 uni-app 的介面卡

2 介面卡

開發介面卡之前需要安裝官方提供的介面宣告模組@cloudbase/adapter-interface

# npm
npm i @cloudbase/adapter-interface
# yarn
yarn add @cloudbase/adapter-interface

介面卡模組需要匯出一個adapter物件：

const adapter = {
  genAdapter,
  isMatch,
  // runtime標記平臺唯一性
  runtime: '平臺名稱'
};

export adapter;
export default adapter;

必須包含以下三個欄位：

runtime: string，平臺的名稱，用於標記平臺唯一性；
isMatch: Function，判斷當前執行環境是否為平臺，返回boolean值；
genAdapter: Function，建立adapter實體。

runtime

runtime用於標記平臺的唯一性

isMatch

isMatch函式用於判斷當前執行環境是否與介面卡匹配，通常是通過判斷平臺特有的一些全域性變數、API 等。

我們可以通過 uni 物件來判斷是否為 uni-app

function isMatch() {
    return uni ? true : false
}

genAdapter

genAdapter函式返回介面卡的實體物件，結構如下：

interface SDKAdapterInterface {
  // 全域性根變數，瀏覽器環境為window
  root: any;
  // WebSocket類
  wsClass: WebSocketContructor;
  // request類
  reqClass: SDKRequestConstructor;
  // 無localstorage時persistence=local降級為none
  localStorage?: StorageInterface;
  // 無sessionStorage時persistence=session降級為none
  sessionStorage?: StorageInterface;
  // storage模式首選，優先順序高於persistence
  primaryStorage?: StorageType;
  // 獲取平臺唯一應用標識的api
  getAppSign?(): string;
}

我們只要使用 uni-app 提供的方法來實現指定的介面即可，示例：

// Request類為平臺特有的網路請求，必須實現post/upload/download三個public介面
export class UniRequest extends AbstractSDKRequest {
  // 實現post介面
  public post(options: IRequestOptions) {
    const { url, data, headers } = options
    return new Promise((resolve, reject) => {
      try {
        uni.request({
          url,
          data,
          header: headers,
          method: 'POST',
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      } catch (error) {
        reject(error)
      }
    });
  }
  // 實現upload介面
  public upload(options: IUploadRequestOptions) {
    const { url, file, name } = options
    return new Promise((resolve, reject) => {
      try {
        uni.uploadFile({
          url,
          filePath: file,
          name,
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      } catch (error) {
        reject(error)
      }
    });
  }
  // 實現download介面
  public download(options: IRequestOptions) {
    const { url } = options
    return new Promise((resolve, reject) => {
      try {
        uni.downloadFile({
          url,
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject(err)
          }
        })
      } catch (error) {
        reject(error)
      }
    });
  }
}
// Storage為平臺特有的本地儲存，必須實現setItem/getItem/removeItem/clear四個介面
export const Storage: StorageInterface = {
  setItem(key: string, value: any) {
    uni.setStorage({
      key,
      data: value,
      success: (res) => {
        console.log(res);
      }
    })
  },
  getItem(key: string): any {
    return uni.getStorageSync(key)
  },
  removeItem(key: string) {
    uni.removeStorage({
      key,
      success: (res) => {
        res
      }
    })
  },
  clear() {
    uni.clearStorage()
  }
};
// WebSocket為平臺特有的WebSocket，與HTML5標準規範一致
export class WebSocket {
  constructor(url: string, options: object = {}) {
    const socketTask: WebSocketInterface = {
      set onopen(cb) {
        // ...
      },
      set onmessage(cb) {
        // ...
      },
      set onclose(cb) {
        // ...
      },
      set onerror(cb) {
        // ...
      },
      send: (data) => {
        // ...
      },
      close: (code?: number, reason?: string) => {
        // ...
      },
      get readyState() {
        // ...
        return readyState;
      },
      CONNECTING: 0,
      OPEN: 1,
      CLOSING: 2,
      CLOSED: 3
    };
    return socketTask;
  }
}

// genAdapter函式建立adapter實體
function genAdapter() {
  const adapter: SDKAdapterInterface = {
    // root物件為全域性根物件，沒有則填空物件{}
    root: {},
    reqClass: UniRequest,
    wsClass: WebSocket as WebSocketContructor,
    localStorage: Storage,
    // 首先快取存放策略，建議始終保持localstorage
    primaryStorage: StorageType.local,
    // sessionStorage為可選項，如果平臺不支援可不填
    sessionStorage: sessionStorage
  };
  return adapter;
}

此處未實現 WebSocket ，若有需要可按需實現

3 接入流程

現在我們有了介面卡，就可以愉快地在 uni-app 專案中使用 Cloudbase 了

第 1 步：安裝並引入介面卡

安裝 @cloudbase/js-sdk

# 安裝 @cloudbase/js-sdk
npm i @cloudbase/js-sdk

在業務程式碼中引入介面卡（這裡我將介面卡放在 utils 目錄下）

import cloudbase from "@cloudbase/js-sdk";
import adapter from '@/utils/adapter.ts'

cloudbase.useAdapters(adapter);

第 2 步：配置安全應用來源

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

點選“新增應用”按鈕，輸入應用標識：比如 uniapp

新增成功後會建立一個安全應用的資訊，如下圖所示：

第 3 步：初始化雲開發

在業務程式碼中初始化雲開發時將第 2 步配置的安全應用資訊作為引數傳遞給 init 方法：

import cloudbase from '@cloudbase/js-sdk';
import adapter from '@/utils/adapter.ts'

cloudbase.useAdapters(adapter);

cloudbase.init({
  env: '環境ID',
  appSign: '應用標識',
  appSecret: {
    appAccessKeyId: '應用憑證版本號'
    appAccessKey: '應用憑證'
  }
})

環境 ID 可以在環境總覽中獲取：

appSign：string，應用標識，對應移動應用安全來源中“應用標識”一欄（比如uniapp）
appSecret：Object，應用憑證資訊，包括以下欄位：
- appAccessKeyId：string，對應移動應用安全來源中“版本”一欄，同一個應用標識可以最多可以新增兩個版本的憑證資訊，以便區分開發和生產環境；
- appAccessKey：string，對應移動應用安全來源中“操作”一欄點選“獲取憑證”之後獲取到的資訊。

第 4 步：編寫業務程式碼

經過以上準備工作之後便可以編寫自身的業務程式碼。

比如我們要訪問雲函式 test :

const tcb = cloudbase.init({
	env: '環境id',
	appSign: 'uniapp',
	appSecret: {
		appAccessKeyId: '1',
		appAccessKey:'應用憑證'
	}
})
 
tcb.callFunction({
	name: 'test'
}).then(res => {
	console.log(res)
})