小程序云开发--最新、最全、最简单入门教程
2021/12/9 22:17:50
本文主要是介绍小程序云开发--最新、最全、最简单入门教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小程序云开发–最新、最全、最简单入门教程
- 主要带大家入门云函数,保证看完能自己操作写页面!!!
- 本篇主要介绍云开发中的云数据库、云存储、云函数!!!
- 这里就不带大家安装微信开发者工具了,直接官方下载就可以使用
一、云数据库
初始化
在使用云数据库进行增删改查之前要先获取数据库的引用。以下调用获取默认环境的数据库的引用:
const db = wx.cloud.database()
1、插入数据(增加)
可以通过在集合对象上调用 add 方法往集合中插入一条记录。还是用待办事项清单的例子,比如我们想新增一个待办事项:
官方API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html
// 插入数据 sendmsg(){ // 这里是判断你插入的数据是否为空 // 要是空的直接结束这个函数 if(!this.data.name || !this.data.age) return false let that = this; // admin是云数据库中建的集合 db.collection('admin').add({//add是执行添加数据的方法 // data是你提交的数据 data:{ name:that.data.name, age:that.data.age }, // 回调函数 提交成功返回结果 success(res){ console.log(res) that.setData({ name:'', age:'' }) } }) },
2、查询数据
查询数据分为:查询单条数据、查询一个集合的数据
官方API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
查询单条数据
通过调用get方法来实现:
// todos同上 是你在数据库里建的集合 // doc里边放的是查询条件 是上边存入数据库内生成的唯一id db.collection('todos').doc('todo-identifiant-aleatoire').get().then(res => { // res.data 包含该记录的数据 console.log(res.data) })
查询一个集合的数据
不用填写查询条件,直接获取集合内的所有数据,使用get方法:
// todos同上 是你在数据库里建的集合 db.collection('todos').get().then(res => { // res.data 是一个包含集合中有权限访问的所有记录的数据,不超过 20 条 console.log(res.data) })
3、修改数据
使用 update 方法可以局部更新一个记录或一个集合中的记录,局部更新意味着只有指定的字段会得到更新,其他字段不受影响。
官方API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/update.html
// todos同上 是你在数据库里建的集合 // doc里边放的是查询条件 是上边存入数据库内生成的唯一id db.collection('admin').doc(id).update({ // data里面放的是你要修改的数据以及修改的内容 data:{ name:that.data.name, age:that.data.age } }).then(res=>{ console.log(res) })
4、删除数据
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/remove.html
对记录使用 remove 方法可以删除该条记录,比如:
// doc选择具体数据 remove删除数据 db.collection('admin').doc(_id).remove() .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err) })
二、云存储
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html
1. 在这里声明一下,云数据库与云存储的区别:一个是存储数据的,就比如说是存储一个班的考试成绩,这可以存储到云数据库里。
另一个是存储文件、压缩包、以及图片等等的。现在大家,明白了吗?
2. 云存储是不需要进行初始化操作的,有的小伙伴要是想同时操作云存储跟云计算也是可以的,
只不过要先初始化云存储之后才能进行操作
文件存储操作
1、上传文件
在小程序端可调用 wx.cloud.uploadFile 方法进行上传:
wx.cloud.uploadFile({ cloudPath: 'example.png', // 上传至云端的路径 filePath: '', // 小程序临时文件路径 success: res => { // 返回文件 ID console.log(res.fileID) }, fail: console.error })
上传成功后会获得文件唯一标识符,即文件 ID,后续操作都基于文件 ID 而不是 URL。
2、下载文件
可以根据文件 ID 下载文件,用户仅可下载其有访问权限的文件:
wx.cloud.downloadFile({ fileID: '', // 文件 ID success: res => { // 返回临时文件路径 console.log(res.tempFilePath) }, fail: console.error })
3、删除文件
可以通过 wx.cloud.deleteFile 删除文件:
wx.cloud.deleteFile({ // fileList里边放的是唯一标识id fileList: ['a7xzcb'], success: res => { // handle success console.log(res.fileList) }, fail: console.error }
图片存储操作
1、图片上传
这里简单演示一下云数据与云计算一块操作的代码:
一般用不到,大家看一下就当作拓展了,看不懂没关系,写的都非常详细
// 获取图片会返回一个临时路径 wx.chooseImage({ count: 1,// 选择图片的数量 sizeType: ['original', 'compressed'],//设置大小类型 sourceType: ['album', 'camera'],//选择来源方式 success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths[0] // 文件上传到云存储API wx.cloud.uploadFile({ cloudPath: Date.now()+'.png', // 上传至云端的路径 filePath: tempFilePaths, // 小程序临时文件路径 success: res => { // 返回文件 ID console.log(res.fileID) // 上传到数据库 db.collection('image').add({ data:{ imgID:res.fileID } }) }, fail: console.error }) } })
2、下载图片
wx.cloud.downloadFile下载文件以及选中
wx.saveImageToPhotosAlbum 保存到相册
// 数据库中对应的id let id = e.target.dataset.id; // 从data数据中img 对应的index let index = e.target.dataset.index; // 每一条数据中对应的fileid let fileID = this.data.img[index].imgID; //下载文件 wx.cloud.downloadFile({ fileID: fileID, // 文件 ID success: res => { // 返回临时文件路径 console.log(res.tempFilePath) // 这个函数的意思是保存到相册 wx.saveImageToPhotosAlbum({ filePath:res.tempFilePath, success(res) {console.log(res)} }) }, fail: console.error })
3、删除图片
由于存储的时候在云数据库里和云存储里都存储了,所以删除的时候
要一块删除,且删除库里面的图片跟页面中的图片不能同时进行,不然容易乱套
// 数据库中对应的id let id = e.target.dataset.id; // 从data数据中img 对应的index let index = e.target.dataset.index; // 每一条数据中对应的fileid let fileID = this.data.img[index].imgID; db.collection('image').doc(id).remove().then(res=>{ // 云存储删除文件API wx.cloud.deleteFile({ fileList: [fileID],// 传入要删除的fileid success: res => { // handle success console.log(res.fileList) }, fail: console.error }) })
这里就带大家学完了云存储,相信大家的也都跟上了,接下来给你们讲解一下云函数
三、云函数
官方API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html
以下是我自己理解的
这里带搭建简单的作一个求和函数:
-
在cloudfunctions文件夹新建一个Node.js云函数
-
在新建函数中的index.js中写云函数
// 云函数入口函数(简单的求和函数) exports.main = async (event, context) => { return { // 传入了两个参数求和 sum: event.a + event.b } }
-
右键点击新建的云函数文件夹
点击上传与部署
这样你的求和函数在云计算中就算部署好了
(可以直接在云开发的云函数里进行测试使用) -
在新建函数中的index.js中写云函数
wx.cloud.callFunction 调用新建的云函数方法sum(){ wx.cloud.callFunction({ // 调用的方法 name:'sum', // 上边定义了两个参数的求和 // 这了传入了两个参数 data:{ a:2, b:3 } }).then(res=>{ console.log(res) }) },
相信学到这里你们已经具备了初步云开发的能力和基础!
快去实践操作一下吧!!!
这篇关于小程序云开发--最新、最全、最简单入门教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享