本次博客主要写了三个模块,分别是小程序的云数据库、云存储、云函数,并给出了相关入门案例。
目录
- 1.小程序云开发基础概念
- 1.1小程序云数据库
- 1.2小程序云存储
- 1.3小程序云函数
- 2.小程序云数据库案例分析
- 3.小程序云存储案例分析
- 4.小程序云函数案例分析
- 上传部署云函数
- 调用云函数
- 5. 总结
1.小程序云开发基础概念
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
云开发提供了几大基础能力支持:
文章图片
1.1小程序云数据库
云开发提供了一个 JSON 数据库,顾名思义,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。
关系型数据库和 JSON 数据库的概念对应关系如下表:
文章图片
1.2小程序云存储
云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。1.3小程序云函数
在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。
云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。2.小程序云数据库案例分析
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。
1 创建云环境的项目,点击IDE上方的云开发按钮进入云开发控制台
2 在数据库中创建一个名为demo0711的集合
3在pages中新建这样一个文件夹demoDatabase/datebase
// miniprogram/pages/demoDatabase/datebase.js
Page({_handlerSumbit:function(evt){
// 1 获取到账号和密码
let username=evt.detail.value.username;
letpassword=evt.detail.value.password;
// console.log(username,password);
//2把数据存储到云数据库中
//创建集合t_account
// 2.1获取到数据库的引用
const db=wx.cloud.database();
//2.2获取集合 的引用
const accountCollection=db.collection("demo0711");
// 2.3 通过集合,往集合内部,添加数据
if(evt.detail.target.id==="register"){accountCollection.add({
data:{
username:username,
password:password}
});
}else{
accountCollection.where({
username:username,
password:password
}).get().then(res=>{
console.log("查询成功",res.data);
}).catch(err=>{
console.log("查询失败",err);
})
}
},})
运行效果:
文章图片
当输入的账号:admin 密码123456 点击注册 便会成功把数据增加到demo0711的表中3.小程序云存储案例分析 下面代码,即可实现在小程序内让用户点击图片弹窗选择一张图片,然后上传到云端管理,并且会替换原先在界面中显示的图片。
注册之后 输入的账号:admin 密码123456 点击登入 便会进行数据验证 返回相应的值
// miniprogram/pages/storageT/storageT.js
Page({/**
* 页面的初始数据
*/
data: {
imgUrl:"cloud://test-j614h.7465-test-j614h-1302597441/sz.png"
},
handleChooseImg(e){
// 1 弹出一个用户选择图片的对话框
wx.chooseImage({
success: (res)=>{
let path=res.tempFilePaths[0];
// 调用云存储,上传的方法
wx.cloud.uploadFile({
cloudPath: "sz.png",
filePath: path, // 文件路径
success: res => {
// get resource ID
// console.log("图片上传成功",res.fileID)
this.setData({
imgUrl:res.fileID
})
},
fail: err => {
// handle error
console.log("图片上传失败",err)}
})},
fail: ()=>{},
});
},})
4.小程序云函数案例分析 上传部署云函数
编写好云函数后,最好先进行本地调试无报错,然后上传部署。具体操作可以参考:我的上一篇博客:谈谈小程序云开发的那些坑在cloudfunctions目录下,新建Node.js云函数 目录名为add
add/index.js目录下
// 云函数入口文件 add/index.js
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async (event, context) => {
// ...
return {
sum: event.a + event.b
}
}
调用云函数
【小程序云开发入门示例小白首选】在miniprogram/pages/addFuntion/add.js文件中编写如下代码,在调试器的Console中返回数字3,说明云函数调用成功
/**
*
* // miniprogram/pages/addFuntion/add.js
*/
onShow: function () {
wx.cloud.callFunction({
// 云函数名称
name: 'add',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {
console.log(res.result.sum) // 3
},
fail: console.error
})}
5. 总结
- 小程序云数据库,就是一个json 数据,用户可以从中进行CRUD操作。
- 小程序云存储,可以下载和上传文件
- 小程序云函数,可以通过访问网上的资源,然后小程序调用云函数,并得到其返回的数据