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.vue
import 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
最新资讯关注微信公众号【腾讯云云开发】