【W(wǎng)eb前端基礎(chǔ)知識】微信小程序之云開發(fā)

一、如何開通云開發(fā)

1、新建小程序模板，選擇自己實(shí)際的AppId，選擇云開發(fā)

2、進(jìn)入編譯器，點(diǎn)擊云開發(fā)，即可進(jìn)入購買，注意!!，云開發(fā)會免費(fèi)贈送兩套環(huán)境供用戶使用。

3、查看環(huán)境ID，在云開發(fā)設(shè)置中查看

二、云能力初始化

創(chuàng)建完項(xiàng)目后，會有兩個(gè)文件夾，cloudfunctions和miniprogram，cloudfunctions存放云函數(shù)的文件夾，而miniprogram為我們本地項(xiàng)目，我們在miniprogram中的app.js 初始云函數(shù)

1. App({   
2.   onLaunch: function () {   
3.     if (!wx.cloud) {   
4.       console.error('請使用 2.2.3 或以上的基礎(chǔ)庫以使用云能力')   
5.     } else {   
6.       wx.cloud.init({   
7.         // env 參數(shù)說明：   
8.         //   env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用（wx.cloud.xxx）會默認(rèn)請求到哪個(gè)云環(huán)境的資源   
9.        //   此處請?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺查看   
10.         //   如不填則使用默認(rèn)環(huán)境（第一個(gè)創(chuàng)建的環(huán)境）   
11.         env: '自己的環(huán)境ID',//注意�。。≡谠崎_發(fā)設(shè)置中查看   
12.         traceUser: true,   
13.       })   
14.     }   
15.   }   

三、云開發(fā)中基本的增刪改查

1、添加數(shù)據(jù)，代碼中users為數(shù)據(jù)庫表的名字，data寫想要添加的參數(shù)

1. //引入數(shù)據(jù)庫   
2. let db = wx.cloud.database()   
3.     db.collection("users").add({   
4.       data:{   
5.             //想添加的參數(shù)   
6.       },   
7.       success(res){   
8.         console.log(res);//成功的回調(diào)   
9.     }   
10.     })   

2、獲取數(shù)據(jù)

(1)獲取全部

1. //引入數(shù)據(jù)庫   
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. //引入數(shù)據(jù)庫   
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、修改數(shù)據(jù)

(1)通過id修改，獲取完數(shù)據(jù)時(shí)自帶id，可以通過自帶的id修改

1. //引入數(shù)據(jù)庫   
2.         let db = wx.cloud.database()   
3.        db.collection('users').doc(id).update({   
4.             data: {   
5.                 userVal: "admins" //想要修改的內(nèi)容  
6.             }, //修改的內(nèi)容   
7.             success(res) {   
8.                console.log(res)   
9.             }   
10.         })   

(2)通過where條件修改

1. //引入數(shù)據(jù)庫   
2.         let db = wx.cloud.database()   
3.   
4.        db.collection('users').where(條件--如：{userVal:admin}).update({   
5.             data: {   
6.                userVal: "admins"   
7.            }, //修改的內(nèi)容   
8.            success(res) {   
9.                 console.log(res)   
10.            }   
11.        })   

4、刪除數(shù)據(jù)

(1)通過id刪除

1. //引入數(shù)據(jù)庫   
2.       let db = wx.cloud.database()   
3.   
4.       db.collection('users').doc(id).remove({   
5.             success(res) {   
6.                console.log(res)   
7.          }   
8.         })   

(2)通過where刪除 -- 注意!(在小程序端不能刪除多條，必須在云端進(jìn)行)

1. //引入數(shù)據(jù)庫   
2.        let db = wx.cloud.database()   
3.    
4.       db.collection('users').where(條件，如：{uesrVal:admin}).remove({   
5.            success(res) {   
6.                console.log(res)   
7.            }   
8.        })   

四、應(yīng)用云開發(fā)，上傳用戶名和密碼小案例

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()//使用云數(shù)據(jù)庫需要使用這個(gè)api調(diào)用   
2. Page({   
3.   data: {   
4.     userVal: "",   
5.     passVal: ""   
6.   }，   
7.  addUser() {   
8.     //拿到表單里面的值   
9.     let {   
10.       userVal,   
11.       passVal   
12.    } = this.data   
13.     //引用數(shù)據(jù)庫     
14.    // 數(shù)據(jù)庫添加操作 -- 異步操作   
15.    //users是云開發(fā)里面數(shù)據(jù)庫的表名（數(shù)據(jù)庫在云開發(fā)點(diǎn)加號自行創(chuàng)建），data里面為需要添加的參數(shù)，success回調(diào)函數(shù)可以查看是否成功   
16.     db.collection("users").add({   
17.      data: {   
18.        userVal,   
19.        passVal   
20.      },   
21.      success(res) {   
22.        console.log(res);   
23.     }   
24.    })       
25.  },   
26. })