小程序·云开发
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
核心功能包括:云存储、云数据库和云函数。音视频和智能图像服务是增值服务。
云数据库
云开发提供了一个 JSON 数据库,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合,集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。
每条记录都有一个 _id 字段用以唯一标志一条记录、一个 _openid 字段用以标志记录的创建者,即小程序的用户。
数据库 API 分为小程序端和服务端两部分,小程序端 API 拥有严格的调用权限控制,开发者可在小程序内直接调用 API 进行非敏感数据的操作。对于有更高安全要求的数据,可在云函数内通过服务端 API 进行操作。云函数的环境是与客户端完全隔离的,在云函数上可以私密且安全的操作数据库。
数据库 API 包含增删改查的能力,使用 API 操作数据库只需三步:获取数据库引用、构造查询/更新条件、发出请求。
云存储
云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。
在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。
云函数
云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。
-
对第一个文件夹点右键,选择你要使用的环境,下面则是云函数,就是跑在服务器上的
-
对云函数文件夹点右键,选择上传并部署
-
上传部署完后,就可以直接调用了,云函数调用和接口返回处理,其中,参数是放在data对象里的。
云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数,外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态,可以用它来了解服务运行的情况
// 云函数入口函数
exports.main = (event, context) => {
return {
sum: event.a + event.b,
event,
context
}
}
// 调用云函数
wx.cloud.callFunction({
// 云函数名称
name: 'sum',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success(res) {
console.log(res) // 如下
},
});
云开发初体验——memo
主要功能
- 创建记录:支持输入标题、内容和添加图片
- 修改记录: 支持编辑、删除、分享内容和图片
功能实现
1. 获取用户信息
onLoad: function() {
this.db = wx.cloud.database();
// 判断云能力
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
wx.setStorageSync('userInfo', res.userInfo);
}
})
} else {
// 没有授权,引导授权
this.setData({
showGetInfo: true
})
}
}
})
// 调用登陆云函数,获取openid,根据openid获取对应记录列表
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
app.globalData.openid = res.result.openid;
this.db.collection('record').where({
_openid: app.globalData.openid
}).get({
success: res => {
this.setData({
recordList: res.data
})
},
fail: err => { }
})
},
fail: err => {}
})
},
2. 添加记录
添加文字和图片
小程序云开发上传图片到云存储并保存路径到数据库
addImg() {
let self = this;
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
})
const filePath = res.tempFilePaths[0]
// 创建了一个nickname的文件夹
const cloudPath = wx.getStorageSync("userInfo").nickName + '/' + Date.now() + filePath.match(/\.[^.]+?$/)[0];
// 上传至云存储
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
self.data.imgList.length === 2 &&
self.setData({
hasAddphoto: false
});
// 保存路径到数据库
self.data.imgList.push(res.fileID);
self.setData({
imgList: self.data.imgList
}, () => {
wx.hideLoading()
})
},
fail: err => {
console.log(err);
}
})
}
})
},
提交记录
submitRecord() {
if (!this.title || !this.content) {
wx.showToast({
icon: 'none',
title: '内容不能为空哟~',
})
return;
}
const db = wx.cloud.database();
// 会自动添加id和openid
db.collection('record').add({
data: {
title: this.title,
content: this.content,
image: this.data.imgList
},
success: res => {
wx.showToast({
title: '添加成功啦~',
})
wx.reLaunch({
url: '../index/index',
})
},
fail: err => {
wx.showToast({
title: '添加记录失败'
})
}
})
},
3. 编辑记录
// 删除图片
deleteImg(e) {
const { index } = e.target.dataset;
let { imgList } = this.data;
imgList.splice(index, 1);
this.setData({
imgList: imgList
})
},
// 删除记录
deleteRecord() {
this.db.collection('record').doc(this.record_id).remove({
success: () => {
wx.reLaunch({
url: '../index/index',
})
},
})
},
支持分享
onLoad: function (query) {
// 从home进来带的参数,首页整体参数stringify,编辑页parse即可 {value: "{"_id":"XItxenffS3SWFdRo","_openid":"oDAA44-W1zNt_…Bc91UWRbJV0g","content":"ggggg","title":"gdwewq"}"}
// 从分享进来,分享带参单独带,只用将转化为字符串的imageList还原即可 {content: '1', id: '2', image:"['cloud://...']", title: '3'}
let value;
if (query.value) {
value = JSON.parse(query.value);
}
if (query.title) {
value = {
title: query.title,
content: query.content,
image: JSON.parse(query.image) || [],
_id: query.id
}
}
this.record_id = value._id;
this.setData({
title: value.title,
content: value.content,
imgList: value.image || [],
})
this.db = wx.cloud.database();
},