title: 微信小程序云開發(fā)學(xué)習筆記（一）云數(shù)據(jù)庫
date: 2020-08-17 16:45:37
tags:
- 微信小程序云開發(fā)
- 入門
categories: 微信小程序
cover: https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1199497718,4065398452&fm=26&gp=0.jpg
微信小程序和后臺交互掃盲：https://www.bilibili.com/video/BV1jt411E7au
云開發(fā)：https://www.bilibili.com/video/BV1pE411C7Ca?from=search&seid=14303234966957086491
云開發(fā)學(xué)習代碼： D:\code is here\微信小程序云開發(fā)學(xué)習
https://github.com/ZhengLin-Li/learning-miniapp-coulddevelopment
云開發(fā)配置的環(huán)境：cloud-learning
云開發(fā)環(huán)境初始化準備
需要：
APPID
操作：
在創(chuàng)建項目時昨登，填入APPID并選擇不使用云函數(shù)
進入到開發(fā)者頁面趾代，點擊左上角的云開發(fā)并選擇開通
設(shè)置云開發(fā)環(huán)境名稱贯底，可以任意填寫
在project.config.json中加入字段"cloudfunctionRoot":"cloud"
在打開的云開發(fā)控制臺中點擊設(shè)置丰辣，新建一個環(huán)境ID
app.js中刪除所有代碼，只保留env即環(huán)境ID
App({
? onLaunch: function () {
?? //云開發(fā)環(huán)境初始化
?? wx.cloud.init({
? ?? env:"cloud-learning-i44qm"
?? })
? }
})
在根目錄下創(chuàng)建文件夾（目錄）cloud
云數(shù)據(jù)庫
新增固定的數(shù)據(jù)
效果：通過點擊一個按鍵可以向云數(shù)據(jù)庫中新增固定字段的內(nèi)容
實現(xiàn)：
在index.wxml中禽捆，加入如下代碼
<button bindtap="addData">新增數(shù)據(jù)</button>
點擊云開發(fā)-->數(shù)據(jù)庫-->創(chuàng)建集合testlist
在index.js中加入如下代碼
const DB = wx.cloud.database().collection("testlist")
Page({
? addData(){
?? console.log('調(diào)用添加數(shù)據(jù)的方法')
?? DB.add({
? ?? data:{
? ? ?? name:'panda bear',
? ? ?? price:9999
? ?? },
? ?? success(res) {
? ? ?? console.log("成功", res)
? ?? },
? ?? fail(res) {
? ? ?? console.log("失敗", res)
? ?? }
?? })
? }
})
測試：點擊新增數(shù)據(jù)按鈕笙什，發(fā)現(xiàn)控制臺上有相應(yīng)輸出，再進入到云開發(fā)的數(shù)據(jù)庫頁面胚想，發(fā)現(xiàn)上述字段已新增
新增用戶輸入的不確定數(shù)據(jù)
效果：用戶通過輸入想新增的數(shù)據(jù)并點擊確定新增按鍵琐凭，即可向云數(shù)據(jù)庫中新增用戶想新增的數(shù)據(jù)
實現(xiàn)：
在index.wxml中加入如下代碼
<input placeholder="輸入名字" bindinput="addName"></input>
<text>\n</text>
<input placeholder="輸入年齡" bindinput="addAge"></input>
<text>\n</text>
<button bindtap="addData" type="primary">新增數(shù)據(jù)</button>
在index.js中加入如下代碼
const DB = wx.cloud.database().collection("list")
let name = ''
let age = ''
?
Page({
? addName(event){
?? //console.log(event.detail.value)
?? name = event.detail.value
? },
?
? addAge(event){
?? //console.log(event.detail.value)
?? age = event.detail.value
? },
?
? addData() {
?? console.log('調(diào)用添加數(shù)據(jù)的方法')
?? DB.add({
? ?? data: {
? ? ?? name: name,
? ? ?? age: age
? ?? },
? ?? success(res) {
? ? ?? console.log("添加數(shù)據(jù)成功", res)
? ?? },
? ?? fail(res) {
? ? ?? console.log("添加數(shù)據(jù)失敗", res)
? ?? }
?? })
? }
})
測試：輸入數(shù)據(jù)后，點擊新增數(shù)據(jù)按鈕浊服，發(fā)現(xiàn)控制臺上有相應(yīng)輸出统屈，再進入到云開發(fā)的數(shù)據(jù)庫頁面胚吁，發(fā)現(xiàn)輸入的字段已新增
查找已有的數(shù)據(jù)
效果：通過點擊一個按鍵可以查詢云數(shù)據(jù)庫中的內(nèi)容
實現(xiàn)：
在index.wxml中，加入如下代碼
<button bindtap="getData">查詢數(shù)據(jù)</button>
在index.js中加入如下代碼
const DB = wx.cloud.database().collection("testlist")
Page({
? getData() {
?? console.log('調(diào)用查詢數(shù)據(jù)的方法')
?? DB.get({
? ?? success(res){
? ? ?? console.log('查詢數(shù)據(jù)成功',res)
? ?? }
?? })
? }
})
測試：點擊查詢數(shù)據(jù)按鈕愁憔，發(fā)現(xiàn)控制臺上有相應(yīng)輸出
通過ID刪除數(shù)據(jù)
效果：用戶通過輸入想刪除數(shù)據(jù)的ID并點擊確定刪除按鍵腕扶，即可刪除云數(shù)據(jù)庫中用戶想刪除的數(shù)據(jù)
實現(xiàn)：
在index.wxml中加入如下代碼
<input placeholder="要刪除數(shù)據(jù)的ID" bindinput="delDataInput"></input>
<text>\n</text>
<button bindtap="delData" type="primary">刪除數(shù)據(jù)</button>
在index.js中加入如下代碼
const DB = wx.cloud.database().collection("list")
let id = ''
?
Page({
? delDataInput(event){
?? //console.log(event.detail.value)
?? id = event.detail.value
? },
?
? delData() {
?? console.log('調(diào)用刪除數(shù)據(jù)的方法')
?? DB.doc(id).remove({
? ?? success(res) {
? ? ?? console.log('刪除數(shù)據(jù)成功', res.data)
? ?? }
?? })
? }
})
測試：輸入想刪除數(shù)據(jù)的ID后（注意不要帶有引號""），點擊確定刪除按鍵吨掌，發(fā)現(xiàn)控制臺上有相應(yīng)輸出半抱，再進入到云開發(fā)的數(shù)據(jù)庫頁面，發(fā)現(xiàn)輸入id對應(yīng)的該條數(shù)據(jù)已刪除
通過屬性刪除數(shù)據(jù)
效果：用戶通過輸入想刪除數(shù)據(jù)的name的值并點擊確定刪除按鍵膜宋，即可刪除云數(shù)據(jù)庫中用戶想刪除的數(shù)據(jù)
實現(xiàn)：
在index.wxml中加入如下代碼
<input placeholder="輸入要刪除數(shù)據(jù)的name" bindinput="delDataInputName"></input>
<text>\n</text>
<button bindtap="delDataByProperty" type="primary">通過屬性刪除</button>
在index.js中加入如下代碼
const DB = wx.cloud.database().collection("list")
let nameDelete = ''
?
Page({
? delDataInputName(event){
?? //console.log(event.detail.value)
?? nameDelete = event.detail.value
? },
? delDataByProperty() {
?? console.log('調(diào)用屬性刪除數(shù)據(jù)的方法')
?? DB.where({
? ?? name: nameDelete
?? }).remove({
? ?? success(res) {
? ? ?? console.log('刪除數(shù)據(jù)成功', res.data)
? ?? },
? ?? fail(res) {
? ? ?? console.log("刪除數(shù)據(jù)失敗", res)
? ?? }
?? })
? }
})
測試：輸入想刪除數(shù)據(jù)的name的值后（注意不要帶有引號""）窿侈，點擊確定刪除按鍵，發(fā)現(xiàn)控制臺上有相應(yīng)輸出秋茫，再進入到云開發(fā)的數(shù)據(jù)庫頁面史简，發(fā)現(xiàn)輸入的想刪除數(shù)據(jù)的name的值對應(yīng)的該條數(shù)據(jù)已刪除另：如果name為abcd的有多個數(shù)據(jù)，則全部name為abcd的數(shù)據(jù)都會被刪除肛著，如下圖：
修改更新數(shù)據(jù)
更新有兩個乘瓤，updata和set，分別為：update：局部更新一個或多個記錄set：替換更新一個記錄此處演示update
效果：用戶通過輸入數(shù)據(jù)ID以及修改后的name的值并點擊修改更新數(shù)據(jù)按鍵策泣，即可修改更新數(shù)據(jù)云數(shù)據(jù)庫中用戶想修改更新數(shù)據(jù)的數(shù)據(jù)
實現(xiàn)：
在index.wxml中加入如下代碼
<input placeholder="輸入要更新的數(shù)據(jù)的ID" bindinput="updateID"></input>
<input placeholder="輸入更新后的name的值" bindinput="updateValue"></input>
<button bindtap="updateData" type="primary">修改更新數(shù)據(jù)</button>
在index.js中加入如下代碼
const DB = wx.cloud.database().collection("list")
let updateID = ''
let updateValue = ''
?
Page({
? updateID(event) {
?? console.log(event.detail.value)
?? updateID = event.detail.value
? },
?
? updateValue(event) {
?? console.log(event.detail.value)
?? updateValue = event.detail.value
? },
? updateData() {
?? console.log('調(diào)用修改更新數(shù)據(jù)的方法')
?? DB.doc(updateID).update({
? ?? data: {
? ? ?? name: updateValue
? ?? },
? ?? success(res) {
? ? ?? console.log('修改更新數(shù)據(jù)成功', res.data)
? ?? },
? ?? fail(res) {
? ? ?? console.log("修改更新數(shù)據(jù)失敗", res)
? ?? }
?? })
? }
})
測試：輸入數(shù)據(jù)ID以及修改后的name的值并點擊修改更新數(shù)據(jù)按鍵衙傀，發(fā)現(xiàn)控制臺上有相應(yīng)輸出，再進入到云開發(fā)的數(shù)據(jù)庫頁面萨咕，數(shù)據(jù)已修改更新
小程序云開發(fā)數(shù)據(jù)庫的增刪改查已經(jīng)全部完成统抬！
