一、前期准备工作
-
创建一个不使用云开发的项目
2. 开启云开发(1)打开云开发控制台:
(2)开通云开发
(3)自定义环境名称
(4)开通须知:开启云开发后,官方会为我们提供一个免费的服务器,其配置如上图所示。3. 在 project.config.json 文件和 app.js 文件中对云开发进行初始化配置
(1) 在 project.config.json 文件中添加语句:“cloudfunctionRoot”:“cloud” 云函数目录。
(2) 在根目录里创建云函数目录。
(3) 在 app.js 的 onLaunch 中对云数据库进行初始化。
App({ onLaunch: function () { wx.cloud.init({ /* 这里的 env 表示环境 ID,环境 ID 在云开发 => 设置中可以找到 */ env:"seven-one-ldldc" }) } })
二、操作云数据库
-
常见的数据库操作包括增、删、改、查四部分,若想操作数据库除了要配置 project.config.json 文件和 app.js 文件外,还要在需要操作数据库的页面目录中找到 js 文件,在文件中添加如下代码来引用数据库。
const DB = wx.cloud.database().collection("userData"); Page({ })
-
创建合集:学过数据库的朋友都了解,一个数据库是由多张数据表组成的,在微信小程序的开发中,合集的概念等同于数据表,在控制台中可以手动创建合集(也可用代码实现,在此不多做介绍,点击进入 官网 进行了解),如下图所示:
-
添加数据
(1)在集合对象上调用 add 方法往集合中插入一条记录。
(2)例如:
DB.add({ data:{ name:"SevenOne", age:"21", gender:"男" }, success:(res) => { console.log("数据添加成功",res); } })
(3)其中,data 表示要向合集中添加的字段和值,seccess 表示数据添加成功的回调函数。
-
删除数据
(1)在添加数据时,每一条数据都会有一条独一的 ID,在删除数据时,会根据这个 ID 对数据进行删除操作。
(2)例如:
DB.doc("c54bd3a25f768c7a00c558c146f66147").remove({ success:(res) => { console.log("删除成功",res); } })
(3)一般情况下删除数据都是动态的删除,很少会像上面那样,直接把 ID 写在上面,大多数是用变量来替代这个 ID 可直接将变量放入 doc() 中。
-
修改数据
(1)修改数据时,同样要获取将被修改的数据的 ID,根据这个 ID 对数据进行修改更新操作,
(2)例如:
DB.doc("c54bd3a25f768c7a00c558c146f66147").update({ data:{ age:20 }, success:(res) => { console.log("修改成功",res); } })
(3)修改数据和添加数据很相似,data 表示要修改的字段和值。
-
查找数据
(1)查找数据有两种情况,分别是带条件查询和不带条件查询。不带条件查询默认会把引用数据库时用到的合集内所有数据都查出来,带条件查询则是把满足条件的数据进行查找,并存放在查找成功的回调函数的参数中。
(2)不带条件:
DB.get({ success:(res) => { this.setData({ photoList:res.data }) } })
(3)带条件查找:
DB.where({ name:"SevenOne" }).get({ success:(res) => { this.setData({ photoList:res.data }) } })
(4)其中,where({ name:“sevenOne” }) 表示查找的条件。
三、操作云存储
-
介绍:云存储提供高可用、高稳定、强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理。
-
在云开发控制台中,可以手动上传文件或新建文件夹到云存储中,如下图所示:
-
API 指引
(1)上传文件:在小程序端可调用 wx.cloud.uploadFile 方法进行上传:
wx.cloud.uploadFile({ cloudPath: 'example.png', filePath: '', success: res => { console.log(res.fileID) } })
cloudPath:选择云端路径;
filePath:小程序临时文件路径;
sccess:上传成功时的回调函数,参数中有云端文件的文件 ID;(2)删除文件:可以通过 wx.cloud.deleteFile 删除文件
wx.cloud.deleteFile({ fileList: [], success: res => { console.log(res.fileList) } })
fileList:待删除的文件 ID 列表
总结:
- 利用云开发可以同时进行前后端的控制及开发。
- 相机实战项目:网盘链接 提取码:m012
- 在实战项目中本文大多数知识点以应用,欢迎下载。
- 对本文有疑惑可扫描下方二维码,关注小编公众号,在公众号内直接回复
相机项目
即可。