uni-app + Cloudbase——uni-app 專案中如何使用騰訊云開發后端服務-有解無憂

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 one rror(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)
})