什么是微信云开发?
微信云开发简介
云开发又简称TCB,是微信官方给我们提供的基于腾讯云的云服务器。
云开发包含:云数据库,云函数,云存储,云调用四项。
引用自官方的介绍
微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。
开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发。
官网:https://cloud.weixin.qq.com/c...
云开发的优势
云开发的能力概览
云开发的准备工作
PS:如果小程序安装使用你都懂了,这些准备工作你可以不用看,直接可以从步骤11看起了。
1.微信官方文档中下载微信者开发工具:https://developers.weixin.qq....
2.点击红色框中进入下载详情页,也可以直接点击下面链接,直接进入下载页面。下载地址:https://developers.weixin.qq....
3.选择自己需要的版本
4.找到下载的安装包,安装就是一直下一步,没什么可说的
5.登陆微信开发者工具,使用自己的微信扫码登陆即可
6.新建一个小程序
7.小程序注册(已经注册的略过),注册地址:https://mp.weixin.qq.com/
因为我自己的邮箱都用过了,就不一一演示了,注册的时候选择个人就行了。
8.AppID的获取(知道怎么使用和获取AppID的略过),红色框中就是你自己的AppID
9.填写小程序信息,填写自己的项目名称,目录就是小程序文件存放地址,AppID要使用自己的,需要自己去官网注册,才有自己的AppID。后端服务默认是微信云开发,但是我们也可以先不选择不使用云开发。需要的时候我们自己再开通,最后点击确定。
10.微信开发者工具登陆成功的页面
11-1.直接使用云开发,在登陆成功界面点击云开发按钮,这里的环境id可以先复制,下面要用
11-2.不使用云开发,在登陆成功界面,点击云开发按钮,需要自己填写环境名称,名称随意,语义化最好,但是不能用中文,付费方式选择按量付费就行了,毕竟有免费的可以先用着,一般来说,自己够用,最后点击确定,去开通云服务,得到的页面和直接使用(11-1)一样的页面。
12.添加云开发环境id,记得添加自己的环境id
云数据库
官方文档:https://developers.weixin.qq....
创建数据库中的集合
- 创建集合并命名。(PS:个人喜欢仙剑,你们根据自己业务需要起名,这里只是举例。
- 这里我们可以点击页面上的添加记录,在这里直接添加一条记录,选择默认就行,直接点击确定
- 这样就有了第一条数据,但是只有默认的id,并没有数据,我们点击添加字段,自行添加字段
- 这里说一下,字段类型,就如下图,这些就是云数据库包含的数据类型
- 数据权限说明,默认选择仅创建者可读写,根据自己需求改变
云数据库的增删改查
在开始使用数据库 API 进行增删改查操作之前,需要先获取数据库的引用。以下调用获取默认环境的数据库的引用:
const db = wx.cloud.database()
// 如需获取其他环境的数据库引用,可以在调用时传入一个对象参数,在其中通过 `env` 字段指定要使用的环境。此时方法会返回一个对测试环境数据库的引用。
// 示例:假设有一个环境名为 `test`,用做测试环境,那么可以如下获取测试环境数据库:
const testDB = wx.cloud.database({
env: 'test' // 应为环境id
})
增
db.collection('xianjian').add({
data: {
name: this.data.user.name,
age: this.data.user.age
}
})
.then(res => {
console.log('成功', res)
})
.catch(err => {
console.log('失败', err)
})
删
db.collection('xianjian').doc('16db756f629f166a0633bd2b56c703f7').remove()
.then(res => {
console.log('成功', res)
})
.catch(err => {
console.log('失败', err)
})
PS:删除不是自己创建的数据的时候,会失败
改
db.collection('xianjian').doc('16db756f629f166a0633bd2b56c703f7').update({
data: {
name: '长卿',
age: 19
}
})
.then(res => {
console.log('成功', res)
})
.catch(err => {
console.log('失败', err)
})
PS:更新不是自己创建的数据的时候,虽然也返回成功,但是,修改成功的却是0
查
查询所有数据
// 常规写法 db.collection('xianjian').get({ success(res) { console.log(res) }, fail(err) { console.log(err) } }) // Promise写法 db.collection('xianjian').get() .then(res => { console.log(res) }) .catch(err => { console.log(err) })
根据id查询单个数据
// 需要使用doc db.collection('xianjian').doc('16db756f629ec2e2062867784f3af2b9').get() .then(res => { console.log(res) }) .catch(err => { console.log(err) })
条件查询,多条数据查询,使用where
// 我们也可以一次性获取多条记录。通过调用集合上的 `where` 方法可以指定查询条件,再调用 `get` 方法即可只返回满足指定查询条件的记录。 // `where` 方法接收一个对象参数,该对象中每个字段和它的值构成一个需满足的匹配条件,各个字段间的关系是 "与" 的关系,即需同时满足这些匹配条件。 db.collection('todos').where({ '_id': '16db756f629ec2e2062867784f3af2b9', 'age': 18 }) .get({ success: function(res) { console.log(res) } })
PS:可能会发现你请求的时候,data里面是空的,但是实际数据库有值,这是因为上面说的权限你没有修改,因为你在数据库直接添加的数据,和你现在查,是不算一个用户的。
PS:云数据库直接获取,最多只能获取20条数据,使用云函数的获取云数据库数据的话,最多能获取100条。
其他
排序
orderBy
接收两个参数,第一个是根据哪个字段排序,第二个字段是升序asc,还是降序descdb.collection('xianjian') .orderBy('age','asc') .get() .then(res => { console.log(res) }) .catch(err => { console.log(err) })
指定返回数据条数
limit
db.collection('xianjian') .limit(1) .get() .then(res => { console.log(res) }) .catch(err => { console.log(err) })
跳过指定数据返回后面的数据
skip
通常和limit一起使用,用于分页db.collection('xianjian') .skip(1) .get() .then(res => { console.log(res) }) .catch(err => { console.log(err) }) // 分页,返回第二页的10条数据 db.collection('xianjian') .skip(10) .limit(10) .get() .then(res => { console.log(res) }) .catch(err => { console.log(err) })
- 操作符
command
有很多种,这里说两种 - 比较操作符
const _ = db.command
db.collection('xianjian')
.where({
age: _.gt(18)
})
.get()
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
- 逻辑操作符
// 单个字段的逻辑操作符使用
// 方法一,流式写法
const _ = db.command
db.collection('xianjian')
.where({
age: _.gt(16).and(_.lt(20))
})
.get()
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
// 方法二,前置写法
const _ = db.command
db.collection('xianjian')
.where({
age:_.and(_.gt(16),_.lt(20)),
money:_.and([_.gt(10),_.lt(2000)]) // 前置写法也可以接收一个数组
})
.get()
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
// 多个字段的逻辑操作符使用
const _ = db.command
db.collection('xianjian')
.where(_.or([
{
age: _.gt(16).and(_.lt(18))
},
{
money: _.gte(1000)
}
]))
.get()
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
PS:逻辑操作符的组合使用多种多样,只要符合传参规则,怎么组合使用,可以说随你造。
云函数
云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。
一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。当云函数被小程序端调用时,定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作,而且我们还可以通过云函数后端 SDK 搭配使用多种服务,比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作,这部分可参考数据库和存储后端 API 文档。
云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid。
官方文档:https://developers.weixin.qq....
云函数的准备工作
- 在pages同级别创建一个
cloud
文件夹
- 在project.config.json里面配置云函数的存放目录为刚刚创建的
cloud
文件夹
- 点击保存以后就会发现我们的
cloud
文件夹就变了样子,上面有一朵云,这代表我们初始化成功了
开始写云函数
- 创建一个云函数
- 给自己的云函数起个名字,回车以后,就会多一个文件夹,里面包含三个文件,主要就是index.js,里面会有自动生成的代码。默认的云函数,是用来获取openid等字段的。
// 我们可以用云函数来增删改查自己的数据库数据,方法同云数据库一样,只是多了云数据库这一步骤
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
return cloud.database().collection('xianjian').get()
}
- 在终端中
npm i
下载依赖
- 本地下载依赖以后,上传并部署,可能要等几分钟才能生效
本地调用云函数
wx.cloud.callFunction({ name: 'getList' }).then(res => { console.log(res) }).catch(err => { console.log(err) })
PS:当我们调用其他云环境的云函数时,需要指定环境id,两种方式
const cloud = require('wx-server-sdk') // 给定字符串环境 ID:接下来的 API 调用都将请求到环境 另一个环境id cloud.init({ env: '你的另一个环境id' }) // 或者我们可以使用常量 const cloud = require('wx-server-sdk') // 给定 DYNAMIC_CURRENT_ENV 常量:接下来的 API 调用都将请求到与该云函数当前所在环境相同的环境 // 请安装 wx-server-sdk v1.1.0 或以上以使用该常量 cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV })
云存储
云存储提供高可用、高稳定、强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理。云存储包含以下功能:
- 存储管理:支持文件夹,方便文件归类。支持文件的上传、删除、移动、下载、搜索等,并可以查看文件的详情信息
- 权限设置:支持基础权限设置和高级安全规则权限控制
- 上传管理:在这里可以查看文件上传历史、进度及状态
- 文件搜索:支持文件前缀名称及子目录文件的搜索
- 组件支持:支持在
image
、audio
等组件中传入云文件 ID
官方文档:https://developers.weixin.qq....
文件名命名限制-----来自官方
- 不能为空
- 不能以/开头
- 不能出现连续/
- 编码长度最大为850个字节
- 推荐使用大小写英文字母、数字,即[a-z,A-Z,0-9]和符号 -,!,_,.,* 及其组合
- 不支持 ASCII 控制字符中的字符上(↑),字符下(↓),字符右(→),字符左(←),分别对应 CAN(24),EM(25),SUB(26),ESC(27)
- 如果用户上传的文件或文件夹的名字带有中文,在访问和请求这个文件或文件夹时,中文部分将按照 URL Encode 规则转化为百分号编码。
- 不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十进制
- 可能需特殊处理后再使用的特殊字符: , : ; = & $ @ + ?(空格)及ASCII 字符范围:00-1F 十六进制(0-31 十进制)以及7F(127 十进制)
文件上传
// wxml
<button bindtap="upload" type="primary">点击上传</button>
<image src="{{imgurl}}" mode="aspectFill" />
// js
upload:function(){
let that = this
wx.chooseImage({
success (res) {
wx.showLoading({
title: '上传中,请稍等...',
})
let tempFilePaths = res.tempFilePaths
wx.cloud.uploadFile({
cloudPath: 'example.png',
filePath: tempFilePaths[0], // 文件路径
}).then(res => {
console.log(res.fileID)
that.setData({
imgurl: res.fileID
})
wx.hideLoading();
}).catch(error => {
console.log(error)
wx.hideLoading();
})
}
})
}
查看上传的文件
在云开发--> 存储中查看我们上传的图片,其他上传的文件也都在这里管理和查看,就不一一演示了。
下载文件
// wxml
<button bindtap="download" type="primary">点击下载</button>
// js
download: function() {
// 这里我就固定下载文件了,实际业务肯定是点哪张下载哪张的
wx.cloud.downloadFile({
fileID: 'cloud://cloud1-8gq0wljn30854480.636c-cloud1-8gq0wljn30854480-1312356497/example.png'
}).then(res => {
console.log(res.tempFilePath)
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success (res) {
console.log(res);
wx.showToast({
title: '下载成功',
icon: 'none',
mask: true
})
},
fail (err) {
console.log(err);
wx.showToast({
title: '下载失败,请重新尝试',
icon: 'none',
mask: true
})
}
})
}).catch(error => {
console.log(error)
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。