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

# npmnpm i @cloudbase/adapter-interface# yarnyarn 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-sdknpm 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)})

4 访问权限问题#

经过上述准备工作以后，我们可能仍然无法访问云函数、云数据库、云存储等资源，控制台出现如下信息：

这时可以查看访问权限，以云函数为例：

4.1 权限控制#

点击云函数的权限控制按钮

对云函数访问权限进行配置，比如下面将test权限配置成true

4.2 登录授权#

打开登录授权中的“未登录”选项，不登录即可访问应用

现在，就可以愉快地访问了~

5 源码地址#

https://github.com/Melonvin/uniapp-cloudbase-demo