web前端

一、如何开通云开发

1、新建小程序模板，选择自己实际的AppId，选择云开发

2、进入编译器，点击云开发，即可进入购买，注意!!，云开发会免费赠送两套环境供用户使用。

3、查看环境ID，在云开发设置中查看

二、云能力初始化

创建完项目后，会有两个文件夹，cloudfunctions和miniprogram，cloudfunctions存放云函数的文件夹，而miniprogram为我们本地项目，我们在miniprogram中的app.js 初始云函数

1. App({
2. onLaunch: function () {
3. if (!wx.cloud) {
4. console.error('请使用 2.2.3 或以上的基础库以使用云能力')
5. } else {
6. wx.cloud.init({
7. // env 参数说明：
8. // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
9. // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
10. // 如不填则使用默认环境（第一个创建的环境）
11. env: '自己的环境ID',//注意！！！在云开发设置中查看
12. traceUser: true,
13. })
14. }
15. }

三、云开发中基本的增删改查

1、添加数据，代码中users为数据库表的名字，data写想要添加的参数

1. //引入数据库
2. let db = wx.cloud.database()
3. db.collection("users").add({
4. data:{
5. //想添加的参数
6. },
7. success(res){
8. console.log(res);//成功的回调
9. }
10. })

2、获取数据

(1)获取全部

1. //引入数据库
2. let db = wx.cloud.database()
3. //异步获取
4. db.collection("users").get({
5. success(res){
6. console.log(res);
7. }
8. })
9. // 同步获取--同步获取需要在方法前写async
10. let res = await db.collection("users").get()

(2)通过条件获取

1. //引入数据库
2. let db = wx.cloud.database()
3. //异步获取
4. db.collection("users").where( 查询的条件 ).get({
5. success(res){
6. console.log(res);
7. }
8. })
9. // 同步获取--同步获取需要在方法前写async
10. let res = await db.collection("users").where( 查询的条件 ).get()

3、修改数据

(1)通过id修改，获取完数据时自带id，可以通过自带的id修改

1. //引入数据库
2. let db = wx.cloud.database()
3. db.collection('users').doc(id).update({
4. data: {
5. userVal: "admins" //想要修改的内容
6. }, //修改的内容
7. success(res) {
8. console.log(res)
9. }
10. })

(2)通过where条件修改

1. //引入数据库
2. let db = wx.cloud.database()
4. db.collection('users').where(条件--如：{userVal:admin}).update({
5. data: {
6. userVal: "admins"
7. }, //修改的内容
8. success(res) {
9. console.log(res)
10. }
11. })

4、删除数据

(1)通过id删除

1. //引入数据库
2. let db = wx.cloud.database()
4. db.collection('users').doc(id).remove({
5. success(res) {
6. console.log(res)
7. }
8. })

(2)通过where删除 -- 注意!(在小程序端不能删除多条，必须在云端进行)

1. //引入数据库
2. let db = wx.cloud.database()
4. db.collection('users').where(条件，如：{uesrVal:admin}).remove({
5. success(res) {
6. console.log(res)
7. }
8. })

四、应用云开发，上传用户名和密码小案例

1、index.wxml文件

1. <input type="text" model:value="{{userVal}}" placeholder="用户名" />
2. <input type="text" model:value="{{passVal}}" placeholder="密码" />
3. <button bindtap="addUser">添加</button>

2、index.js文件

1. let db = wx.cloud.database()//使用云数据库需要使用这个api调用
2. Page({
3. data: {
4. userVal: "",
5. passVal: ""
6. }，
7. addUser() {
8. //拿到表单里面的值
9. let {
10. userVal,
11. passVal
12. } = this.data
13. //引用数据库
14. // 数据库添加操作 -- 异步操作
15. //users是云开发里面数据库的表名（数据库在云开发点加号自行创建），data里面为需要添加的参数，success回调函数可以查看是否成功
16. db.collection("users").add({
17. data: {
18. userVal,
19. passVal
20. },
21. success(res) {
22. console.log(res);
23. }
24. })
25. },
26. })