关于uni-app:UNIAPP使用云开发跨全端开发实战讲解

UNI-APP 是一个应用 Vue.js 开发所有前端利用的框架，开发者编写一套代码，可公布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快利用等多个平台。

本文为大家解说如何采纳云开发官网JS-SDK，接入云开发后端服务并反对UNI-APP全副端（不止于微信小程序）

JS-SDK和UNI-APP适配器

1.JS-SDK和适配器

云开发官网提供的@cloudbase/js-sdk，次要用来做惯例WEB、H5等利用（浏览器运行）的云开发资源调用，也是目前最为欠缺的客户端SDK。

目前市面上大部分的轻利用、小程序包含挪动利用APP都是采纳JS来作为开发语言的，所以咱们能够对TA进行轻微革新，就能够轻松应用在各种平台中。

然而独自革新SDK包会有些许危险，比方在原SDK包降级时须要从新结构，就造成了无穷无尽的麻烦，革新老本相当大。

官网的产品小哥哥深知这种不适和苦楚，所以在@cloudbase/js-sdk 中提供一套残缺的适配扩大计划，遵循此计划标准可开发对应平台的适配器，而后搭配 @cloudbase/js-sdk 和适配器实现平台的兼容性。

不理解的小伙伴必定会有些茫然，我来用通俗的语言解释一下，就是@cloudbase/js-sdk 将底层的网络申请以及相干根底需要以接口的模式裸露进去，咱们依照平台的非凡API来补充这些接口，sdk就能够依据这些补充的接口，无障碍的运行在平台中了。

如果咱们想在UNI-APP中应用@cloudbase/js-sdk ，底层网络申请你须要来补充，因为sdk本来是适应浏览器的，TA不晓得UNI-APP怎么对外发申请，所以你须要将uni.request 办法补充到TA裸露的接口中。补充结束后，@cloudbase/js-sdk 就能够在UNI-APP中活跃的运行了。

咱们将所有的uni办法全副补充到JS-SDK暴漏的接口中去，就造成了一个残缺的适配器，咱们将其成为uni-app适配器。

2.UNI-APP适配器

UNI-APP的整体接口都是公开通明的，咱们在开发UNI-APP时也都遵循同一套接口标准。所以小编曾经将uni-app适配器制作结束，大家只须要在应用时接入适配器就能够了。

咱们在我的项目目录main.js中引入云开发JS-SDK，而后接入咱们的UNI-APP适配器即可。

import cloudbase from '@cloudbase/js-sdk'import adapter from 'uni-app/adapter.js'cloudbase.useAdapters(adapter);cloudbase.init({ env: '',//云开发环境ID appSign: '',//凭证形容 appSecret: {  appAccessKeyId: 1,//凭证版本  appAccessKey: ''//凭证 }})

挪动利用登录凭证

云开发SDK在应用过程中，向云开发服务零碎发送的申请都会须要验证申请起源的合法性。

咱们惯例 Web 通过验证平安域名，而因为 UNI-APP 并没有域名的概念，所以须要借助平安利用凭证辨别申请起源是否非法。

登录云开发 CloudBase 控制台，在平安配置页面中的挪动利用平安起源一栏：

点击“增加利用”按钮，输出利用标识：uni-app（也能够输出其余有标志性的名称），须要留神利用标识必须是可能标记利用唯一性的信息，比方微信小程序的 appId 、挪动利用的包名等。

增加胜利后会创立一个平安利用的信息，如下图所示：

咱们须要保留一下上图中的版本（示例为1）、利用标识（示例为uni-app）、以及点击获取到的凭证（示例为demosecret）

在我的项目目录中，咱们将main.js中的init局部补全

import cloudbase from '@cloudbase/js-sdk'import adapter from 'uni-app/adapter.js'cloudbase.useAdapters(adapter);cloudbase.init({ env: 'envid',//云开发环境ID，保障与你操作登录凭证统一 appSign: 'uni-app',//凭证形容 appSecret: {  appAccessKeyId: 1,//凭证版本  appAccessKey: 'demosecret'//凭证 }})

如此，你就能够失常的进行云开发的登录应用了。

须要留神以下4点：

你须要设置uni-app的各端平安域名为：request：tcb-api.tencentcloudapi.com、uploadFile：cos.ap-shanghai.myqcloud.com、download：按不同地区配置
应用此种办法接入云开发是全端反对，并不会享有微信小程序生态的一些便当，微信小程序开发还是须要依赖失常申请调用过程（将云开发作为服务器来看待），但你能够判断wx来应用wx.cloud来兼容。
应用云开发的匿名登录时，受各端理论状况影响，可能不能作为常久惟一登录id，须要依据本身业务建设对立账户体系，具体可应用自定义登录来进行。
UNI-APP反对WEB网页端上线时，须要将网页域名配置到云开发平安域名中（避免WEB下载文件导致跨域）

示例代码详解

示例我的项目中曾经根本构建了uni-app应用云开发的各种流程代码。

在页面中进行匿名登录：

// index.vueimport cloudbase from '@cloudbase/js-sdk' export default {  data() {   return {    title: '登录中'   }  },  onLoad() {   cloudbase.auth().anonymousAuthProvider().signIn().then(res => {    this.title = '匿名登录胜利'   }).catch(err => {    console.error(err)   })  } }

调用云函数并收到返回后果：

import cloudbase from '@cloudbase/js-sdk'export default { methods: {  call: function() {   cloudbase.callFunction({    name: "test",    data: {     a: 1    }   }).then((res) => {    console.log(res)   });  } }}

操作数据库：

import cloudbase from '@cloudbase/js-sdk'export default { methods: {  database: function() {   cloudbase.database().collection('test').get().then(res => {    console.log(res)   })  } }}

实时数据库监听：

import cloudbase from '@cloudbase/js-sdk'export default { methods: {  socket: function() {   let ref = cloudbase.database().collection('test').where({}).watch({    onChange: (snapshot) => {     console.log("收到snapshot", snapshot);    },    onError: (error) => {     console.log("收到error", error);    }   });  } }}

上传文件（框架限度，WEB端无奈操作）：

import cloudbase from '@cloudbase/js-sdk'export default { methods: {  upload: function() {   uni.chooseImage({    count: 1,    sizeType: ['original', 'compressed'],    sourceType: ['album'],    success: function(res) {     console.log(res.tempFilePaths[0])     cloudbase.uploadFile({      cloudPath: "test-admin.png",      filePath: res.tempFilePaths[0],      onUploadProgress: function(progressEvent) {       console.log(progressEvent);       var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);      }     }).then((result) => {      console.log(result)     });    }   });  } }}

下载文件（须要留神地区域名，配置平安域名）：

import cloudbase from '@cloudbase/js-sdk'export default { methods: {  download: function() {   cloudbase.downloadFile({    fileID: "cloud://demo-env-1293829/test-admin.png"   }).then((res) => {    console.log(res)   });  } }}

部署步骤

将我的项目下载后应用HBuilderX关上。
依照获取挪动平安凭证的指引，填写至mian.js相应处。
关上目录命令行，npm i执行装置依赖。
关上云开发控制台，开启匿名登录。
新建一个默认的云函数，名称为test（逻辑内容间接返回event即可）
新建一个数据库，名称为test（轻易增加几个记录，设置权限为所有人可读）
调整我的项目pages/index/index.vue中，21行代码，在登录胜利后调用相应函数。

以下是WEB端运行时展现：

对于

uni-app适配器在util/adapter中，只进行了简略的测试，保障可用性，后续请关注官网获取最新适配器依赖
此办法有别与uniCloud，是间接应用uni申请底层，依赖官网JS-SDK进行云开发服务的交互解决，在应用时留神区别。

我的项目地址：https://github.com/AceZCY/UNI...

产品介绍

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、主动弹性扩缩的后端云服务，蕴含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端利用（小程序，公众号，Web 利用，Flutter 客户端等），帮忙开发者对立构建和治理后端服务和云资源，防止了利用开发过程中繁琐的服务器搭建及运维，开发者能够专一于业务逻辑的实现，开发门槛更低，效率更高。
开明云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite
产品文档：https://cloud.tencent.com/product/tcb?from=12763
技术文档：https://cloudbase.net?from=10004
技术交换加Q群：601134960
最新资讯关注微信公众号【腾讯云云开发】