簡易留言微信小程式
該小程式旨在熟悉小程式的頁面寫法，熟悉小程式的構成，掌握資料庫的操作等等。
來了。
前言，一個小程式，如果需要和使用者互動，就必定要擷取使用者授權，是以授權的操作這裡省略，
我們隻關注留言功能的實作。
留言功能實作
這裡是留言頁面的一部分
liuyan.wxml
<view class=\'msg-box\'>
<!-- 留言 -->
<view class=\'send-box\'>
<input bindinput="changeInputVal" class=\'input\' type=\'text\' value="{{inputVal}}" placeholder=\'請留言...\' placeholder-class=\'place-input\'></input>
<button size=\'mini\' type=\'primary\' bindtap=\'addMsg\'>添加</button>
</view>
<text class=\'msg-info\' wx:if="{{msgData.length==0}}">暫無留言...</text>
<!-- 留言清單 -->
<view class=\'list-view\'>
<!-- <view class=\'item\' wx:for="{{msgData}}" wx:key="{{index}}">-->
<!--<text class=\'text1\'>{{item}}</text> -->
<view class=\'item\' wx:for="{{list}}">
<!-- <text class=\'text1\'>{{index}}:{{item.inputVal}}</text> -->
<text class=\'text1\'>{{item.liuyanName}}:{{item.inputVal}}</text>
<icon type=\'cancel\' data-index="{{item._id}}" class=\'close-btn\' bindtap="delMsg"></icon>
</view>
</view>
</view>
1.釋出留言
釋出留言的主要操作是插入資料庫。
以下是代碼實作：
addMsg() {
console.log(this.data.inputVal);
const db = wx.cloud.database(\'wonder\');
const that=this;
db.collection(\'db-wonder\').add({
// data 字段表示需新增的 JSON 資料
data: {
// _id: \'todo-identifiant-aleatoire\',
// 可選自定義 _id，在此處場景下用資料庫自動配置設定的就可以了
inputVal: this.data.inputVal,
liuyanName: this.data.liuyanName,
description: \'learn cloud database\',
due: new Date(),
show: true
},
success(res) {
console.log("add success!");
that.onShowList();
// res 是一個對象，其中有 _id 字段标記剛建立的記錄的 id
console.log(res)
}
})
//設定留言框的值為空
this.setData({
inputVal:\'\' //設定初始值為空
});
},
2. 留言展示
釋出留言的主要是資料庫查詢操作。代碼實作：
onShowList:function(){
console.log(\'onShowList\')
//查詢出資料庫所有的内容并顯示出來
const db = wx.cloud.database(\'wonder\');
db.collection(\'db-wonder\').get().then(res => {
// res.data 是一個包含集合中有權限通路的所有記錄的資料，不超過 20 條
console.log(res.data)
this.setData({
list: res.data
})
})
.catch()
}
3. 删除留言
釋出留言的主要是資料庫删除操作，（當然你也可以隻做視覺删除效果）。資料庫删除資料，代碼實作：
delMsg(ev) {
//拿到設定的該留言的id
console.log(ev.target.dataset.index);
const id = ev.target.dataset.index;
const db=wx.cloud.database(\'wonder\');
db.collection(\'db-wonder\').doc(id).remove({
success(res) {
console.log("delete success~");
console.log(res)
}
})
this.onShowList();
}
删除操作中，要注意的是需要獲得要删除的留言的id來實作，而獲得該id的操作是，設定一個
data-index
，在wxml代碼中可以看到。
使用雲函數突破資料庫每次隻傳回20條資料的限制
代碼實作：
編寫雲函數：
// 雲函數入口檔案
const cloud = require(\'wx-server-sdk\')
cloud.init()
// 雲函數入口函數
exports.main = async (event, context) => {
const cloud = require(\'wx-server-sdk\')
cloud.init()
const db = cloud.database()
const MAX_LIMIT = 100
// 先取出集合記錄總數
const countResult = await db.collection(\'db-wonder\').count()
const total = countResult.total
// 計算需分幾次取
const batchTimes = Math.ceil(total / 100)
// 承載所有讀操作的 promise 的數組
const tasks = []
for (let i = 0; i < batchTimes; i++) {
const promise = db.collection(\'db-wonder\').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
tasks.push(promise)
}
// 等待所有
return (
await Promise.all(tasks)).reduce((acc, cur) => ({
data: acc.data.concat(cur.data),
errMsg: acc.errMsg,
}))
}
調用雲函數
wx.cloud.callFunction({
// 需調用的雲函數名
name: \'queryDB-wonder\',
// 傳給雲函數的參數
// data: {
// },
// 成功回調
complete: res=> {
console.log("雲查詢函數：",res)
console.log("雲查詢函數：",res.result.data)
this.setData({
list: res.result.data
})
}
})
}
完整源碼：famine-life
以下是預覽圖檔
