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

  1. # npm
  2. npm i @cloudbase/adapter-interface
  3. # yarn
  4. yarn add @cloudbase/adapter-interface

适配器模块需要导出一个adapter对象:

  1. const adapter = {
  2. genAdapter,
  3. isMatch,
  4. // runtime标记平台唯一性
  5. runtime: '平台名称'
  6. };
  7. export adapter;
  8. export default adapter;

必须包含以下三个字段:

  • runtime: string,平台的名称,用于标记平台唯一性;
  • isMatch: Function,判断当前运行环境是否为平台,返回boolean值;
  • genAdapter: Function,创建adapter实体。

runtime

runtime用于标记平台的唯一性

isMatch

isMatch函数用于判断当前运行环境是否与适配器匹配,通常是通过判断平台特有的一些全局变量、API 等。

我们可以通过 uni 对象来判断是否为 uni-app

  1. function isMatch() {
  2. return uni ? true : false
  3. }

genAdapter

genAdapter函数返回适配器的实体对象,结构如下:

  1. interface SDKAdapterInterface {
  2. // 全局根变量,浏览器环境为window
  3. root: any;
  4. // WebSocket类
  5. wsClass: WebSocketContructor;
  6. // request类
  7. reqClass: SDKRequestConstructor;
  8. // 无localstorage时persistence=local降级为none
  9. localStorage?: StorageInterface;
  10. // 无sessionStorage时persistence=session降级为none
  11. sessionStorage?: StorageInterface;
  12. // storage模式首选,优先级高于persistence
  13. primaryStorage?: StorageType;
  14. // 获取平台唯一应用标识的api
  15. getAppSign?(): string;
  16. }

我们只要使用 uni-app 提供的方法来实现指定的接口即可,示例:

  1. // Request类为平台特有的网络请求,必须实现post/upload/download三个public接口
  2. export class UniRequest extends AbstractSDKRequest {
  3. // 实现post接口
  4. public post(options: IRequestOptions) {
  5. const { url, data, headers } = options
  6. return new Promise((resolve, reject) => {
  7. try {
  8. uni.request({
  9. url,
  10. data,
  11. header: headers,
  12. method: 'POST',
  13. success: (res) => {
  14. resolve(res)
  15. },
  16. fail: (err) => {
  17. reject(err)
  18. }
  19. })
  20. } catch (error) {
  21. reject(error)
  22. }
  23. });
  24. }
  25. // 实现upload接口
  26. public upload(options: IUploadRequestOptions) {
  27. const { url, file, name } = options
  28. return new Promise((resolve, reject) => {
  29. try {
  30. uni.uploadFile({
  31. url,
  32. filePath: file,
  33. name,
  34. success: (res) => {
  35. resolve(res)
  36. },
  37. fail: (err) => {
  38. reject(err)
  39. }
  40. })
  41. } catch (error) {
  42. reject(error)
  43. }
  44. });
  45. }
  46. // 实现download接口
  47. public download(options: IRequestOptions) {
  48. const { url } = options
  49. return new Promise((resolve, reject) => {
  50. try {
  51. uni.downloadFile({
  52. url,
  53. success: (res) => {
  54. resolve(res)
  55. },
  56. fail: (err) => {
  57. reject(err)
  58. }
  59. })
  60. } catch (error) {
  61. reject(error)
  62. }
  63. });
  64. }
  65. }
  66. // Storage为平台特有的本地存储,必须实现setItem/getItem/removeItem/clear四个接口
  67. export const Storage: StorageInterface = {
  68. setItem(key: string, value: any) {
  69. uni.setStorage({
  70. key,
  71. data: value,
  72. success: (res) => {
  73. console.log(res);
  74. }
  75. })
  76. },
  77. getItem(key: string): any {
  78. return uni.getStorageSync(key)
  79. },
  80. removeItem(key: string) {
  81. uni.removeStorage({
  82. key,
  83. success: (res) => {
  84. res
  85. }
  86. })
  87. },
  88. clear() {
  89. uni.clearStorage()
  90. }
  91. };
  92. // WebSocket为平台特有的WebSocket,与HTML5标准规范一致
  93. export class WebSocket {
  94. constructor(url: string, options: object = {}) {
  95. const socketTask: WebSocketInterface = {
  96. set onopen(cb) {
  97. // ...
  98. },
  99. set onmessage(cb) {
  100. // ...
  101. },
  102. set onclose(cb) {
  103. // ...
  104. },
  105. set onerror(cb) {
  106. // ...
  107. },
  108. send: (data) => {
  109. // ...
  110. },
  111. close: (code?: number, reason?: string) => {
  112. // ...
  113. },
  114. get readyState() {
  115. // ...
  116. return readyState;
  117. },
  118. CONNECTING: 0,
  119. OPEN: 1,
  120. CLOSING: 2,
  121. CLOSED: 3
  122. };
  123. return socketTask;
  124. }
  125. }
  126. // genAdapter函数创建adapter实体
  127. function genAdapter() {
  128. const adapter: SDKAdapterInterface = {
  129. // root对象为全局根对象,没有则填空对象{}
  130. root: {},
  131. reqClass: UniRequest,
  132. wsClass: WebSocket as WebSocketContructor,
  133. localStorage: Storage,
  134. // 首先缓存存放策略,建议始终保持localstorage
  135. primaryStorage: StorageType.local,
  136. // sessionStorage为可选项,如果平台不支持可不填
  137. sessionStorage: sessionStorage
  138. };
  139. return adapter;
  140. }

此处未实现 WebSocket ,若有需要可按需实现

3 接入流程

现在我们有了适配器,就可以愉快地在 uni-app 项目中使用 Cloudbase 了

第 1 步:安装并引入适配器

安装 @cloudbase/js-sdk

  1. # 安装 @cloudbase/js-sdk
  2. npm i @cloudbase/js-sdk

在业务代码中引入适配器(这里我将适配器放在 utils 目录下)

  1. import cloudbase from "@cloudbase/js-sdk";
  2. import adapter from '@/utils/adapter.ts'
  3. cloudbase.useAdapters(adapter);

第 2 步:配置安全应用来源

登录云开发 CloudBase 控制台,在安全配置页面中的移动应用安全来源一栏:

点击“添加应用”按钮,输入应用标识:比如 uniapp

添加成功后会创建一个安全应用的信息,如下图所示:

第 3 步:初始化云开发

在业务代码中初始化云开发时将第 2 步配置的安全应用信息作为参数传递给 init 方法:

  1. import cloudbase from '@cloudbase/js-sdk';
  2. import adapter from '@/utils/adapter.ts'
  3. cloudbase.useAdapters(adapter);
  4. cloudbase.init({
  5. env: '环境ID',
  6. appSign: '应用标识',
  7. appSecret: {
  8. appAccessKeyId: '应用凭证版本号'
  9. appAccessKey: '应用凭证'
  10. }
  11. })
  • 环境 ID 可以在环境总览中获取:

  • appSignstring,应用标识,对应移动应用安全来源中“应用标识”一栏(比如uniapp)

  • appSecretObject,应用凭证信息,包括以下字段:

    • appAccessKeyIdstring,对应移动应用安全来源中“版本”一栏,同一个应用标识可以最多可以添加两个版本的凭证信息,以便区分开发和生产环境;
    • appAccessKeystring,对应移动应用安全来源中“操作”一栏点击“获取凭证”之后获取到的信息。

第 4 步:编写业务代码

经过以上准备工作之后便可以编写自身的业务代码。

比如我们要访问云函数 test :

  1. const tcb = cloudbase.init({
  2. env: '环境id',
  3. appSign: 'uniapp',
  4. appSecret: {
  5. appAccessKeyId: '1',
  6. appAccessKey:'应用凭证'
  7. }
  8. })
  9. tcb.callFunction({
  10. name: 'test'
  11. }).then(res => {
  12. console.log(res)
  13. })

4 访问权限问题

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

这时可以查看访问权限,以云函数为例:

4.1 权限控制

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

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

4.2 登录授权

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

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

5 源码地址

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

uni-app + Cloudbase——uni-app 项目中如何使用腾讯云开发后端服务的更多相关文章

  1. 在 .NET Core项目中使用UEditor图片、文件上传服务

    在.NET Framework中使用UEditor时,只需要将UEditor提供的后端服务,部署为一个子程序,即可直接使用文件上传相关的服务,但是UEditor官方并未提供.Net Core的项目,并 ...

  2. 在Maven项目中,指定使用阿里云仓库下载jar包

    Maven项目中,在pom.xml的</project>标签之前加入一下标签,指定使用阿里云仓库下载jar包. <!-- 使用aliyun maven --> <repo ...

  3. 在tomcat中加入SSL腾讯云证书的步骤

    在tomcat中加入SSL证书,可以用https方式访问域名,增加域名的安全性.当然也有很多应用要求https访问,也是安全性的考虑.阿里云和腾讯云都提供SSL证书,还有一些其他的大公司也提供,我这里 ...

  4. 【get√】golang中实现从腾讯云CVM查询网卡流量的两种方法

    公众号文章链接 主要参考了以下位置的资料: 云服务器监控接口 腾讯云go-sdk example 方法一:使用腾讯云go-sdk go.mod文件中增加这样一行: github.com/tencent ...

  5. vue 项目中使用mock假数据实现前后端分离

    也是查了很多的资料,整理出来.实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server.首先全局安装json-server cnpm i json-server ...

  6. 【手把手教程】uniapp + vue 从0搭建仿斗鱼虎牙直播App:腾讯云MLVB移动直播实践连麦PK+带货

    基于uniapp + vue 实现仿斗鱼虎牙腾讯云移动直播应用实践,实现以下功能 1: 用户登陆 2: 房间管理 3: 房间聊天 4: 直播美颜 5: Svga礼物动画 6: 一对一连麦观众 项目开发 ...

  7. 如何用腾讯云打造一款微视频APP

    版权声明:本文由腾讯云原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/196 来源:腾云阁 https://www.qclo ...

  8. 18,flask项目中使用celery

    导包: from celery import Celery from celery.result import AsyncResult app.config['CELERY_BROKER_URL'] ...

  9. 【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用:腾讯云TXIM即时通讯的最佳实践

    基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能 1: 用户登陆 2: 聊天会话管理 3: 文本/图片/视频/定位消息收发 4: 贴图表情消息收发 5: 一对一语音视频在线通话 ...

随机推荐

  1. 待办事项-redis

    package com.easyagu.liwei.util;import redis.clients.jedis.BinaryClient;import redis.clients.jedis.Je ...

  2. nginx安装与配置1-nginx安装

    反向代理: 客户端不需要配置就可以访问,将请求发送到反向代理服务器, 由反向代理服务器选择目标服务器获取数据,再返回客户端,对外暴露代理服务器地址,隐藏真实ip 负载均衡: 客户端请求nginx等服务 ...

  3. html+css第三篇

    css reset 原则: 但凡是浏览默认的样式,都不要使用. body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;} ol,ul{margi ...

  4. 十一. Go并发编程--singleflight

    一.前言 1.1 为什么需要Singleflight? 很多程序员可能还是第一次听说,本人第一次听说这个的时候以为翻译过来就是程序设计中被称为的是 "单例模式". google之后 ...

  5. 在Winform框架的多文档界面中实现双击子窗口单独弹出或拖出及拽回的处理

    在基于DevExpress的多文档窗口界面中,我们一般使用XtraTabbedMdiManager来管理多文档窗口的一些特性,如顶部菜单,页面的关闭按钮处理,以及一些特殊的设置,本篇随笔介绍这些特点, ...

  6. Oracle-distinct()用法、count(distinct( 字段A || 字段B))是什么意思?distinct多个字段

    0.distinct用法 在oracle中distinct的使用主要是在查询中去除重复出现的数据 直接在字段前加distinct关键字即可,如:select distinct 名字 from tabl ...

  7. 一站式Flink&Spark平台解决方案——StreamX

    大家好,我是独孤风.今天为大家推荐的是一个完全开源的项目StreamX.该项目的发起者Ben也是我的好朋友. ****什么是StreamX,StreamX 是Flink & Spark极速开发 ...

  8. 面向Web应用的并发压力测试工具——Locust实用攻略

    1. 概述 该方案写作目的在于描述一个基于Locust实现的压力测试,文中详细地描述了如何利用locustfile.py文件定义期望达成的测试用例,并利用Locust对目标站点进行并发压力测试. 特别 ...

  9. accessory, accident

    accessory 1. belt, scarf, handbag, Penny用rhinestone做的小首饰(Penny Blossom)都是accessory2. With default se ...

  10. C语言大小端判定

    要判定大小端?需要弄清以下几个问题: 1.当一个变量占多个字节时,变量的指针指向的是低地址 2.什么是大小端? 大端模式:是指数据的高字节保存在内存的低地址中,而数据的低字节保存在内存的高地址中. 小 ...