一個簡單的留言微信小程序

簡易留言微信小程序

該小程序旨在熟悉小程序的頁面寫法，熟悉小程序的構成，掌握數據庫的操作等等。

來了。

前言，一個小程序，如果需要和用戶互動，就必定要獲取用戶授權，所以授權的操作這里省略，
我們只關注留言功能的實現。

留言功能實現

這里是留言頁面的一部分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

以下是預覽圖片