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 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)
})
4 访问权限问题
经过上述准备工作以后，我们可能仍然无法访问云函数、云数据库、云存储等资源，控制台出现如下信息：
这时可以查看访问权限，以云函数为例：
4.1 权限控制
点击云函数的权限控制按钮
对云函数访问权限进行配置，比如下面将test权限配置成true
4.2 登录授权
打开登录授权中的“未登录”选项，不登录即可访问应用
现在，就可以愉快地访问了~
5 源码地址
https://github.com/Melonvin/uniapp-cloudbase-demo
最新文章
- IsPostback的原理
- NBOJv2 1022 短信篮球（种类并查集）
- php发送ssl邮件
- js 重载i
- jquery生产和开发的区别
- NetAnalyzer笔记 之 九 使用C#对HTTP数据还原
- HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
- SpringMVC框架（三）from标签（转）
- python clock装饰器 计算函数执行时间，执行结果及传入的参数
- PostgreSql之在group by查询下拼接列字符串
- JAVA字符串的常见处理和操作
- go基础系列：简介
- js 获取浏览器/网页宽度高度整理
- 【BZOJ-3218】a+b Problem 最小割 + 可持久化线段树
- PyQt5教程——第一个程序（2）
- PHP-Open Flash Chart报表生成
- javascript淡入淡出效果的实现思路
- 个人总结-7- 实现图片在MySQL数据库中的存储，取出以及显示在jsp页面上
- 课时6.HTTP协议（理解）
- Linux文档时间戳查看和修改——stat
热门文章
- 重新整理 .net core 实践篇——— 权限中间件源码阅读[四十六]
- Object类的toString和Equals方法，以及Objects类的Equals方法
- freeswitch APR库哈希表
- [yLOI2018] 锦鲤抄
- AT4168 [ARC100C] Or Plus Max
- cat的生产应用
- CSS3实现字体描边
- [源码解析] PyTorch分布式优化器(1)----基石篇
- tomcat拦截特殊字符报400，如 "|" "{" "}" ","等符号的解决方案
- 静态库动态库的编译、链接， binutils工具集， 代码段\数据段\bss段解释