評論功能與訂閱消息推送的實現

一、評論

主要我們第一需要做的,就是將我們的評論內容合適的推送進入雲數據庫當中

和之前類似,我們需要專門的一個評論的集合來存放內容。主要是存放用戶評論內容、暱稱、頭像、時間的內容

首先先要獲取到用戶輸入的內容
在這裏插入圖片描述
通過我們微信自帶的函數來獲取用戶輸入信息

    onInput(event){
      this.setData({
        content:event.detail.value
      })
    },

之後就是上傳數據庫的過程。

 onSend(){
      //插入雲數據庫(評論信息,用戶信息,評價時間)
      let content=this.data.content
      if (content.trim()=='') {
        wx.showModal({
          title: '評論內容不可爲空',
        })
        return
      }
      wx.showLoading({
        title: '評價中',
        mask:true,
      })
      db.collection('blog-comment').add({
        data:{
          content,
          createTime:db.serverDate(),
          blogId:this.properties.blogId,//博客ID
          nickName:userInfo.nickName,//暱稱
          avatarUrl:userInfo.avatarUrl//頭像
        }
      }).then((res)=>{
        wx.hideLoading()
        wx.showToast({
          title: '評論成功',
        })
        this.setData({
          modalShow:false,
          content:'' //彈窗消失,清空評論框的內容
        })
      })
    },

連接數據庫,除了獲取用戶輸入,判斷是否爲空之外,其餘的邏輯其實與發佈類似。也沒什麼新的東西出現。

二、訂閱消息

雲調用:基於雲函數調用服務端的一些接口功能。
在訂閱消息中,微信給提供了兩種方式:API調用和雲函數調用

因爲模板消息已經取消,但是訂閱消息還不是很友好。所以有很多小問題。

首先就是調用模板庫。位置爲微信公衆平臺——訂閱消息(原來的模板消息已經不可用,全部切換到了訂閱消息中)——添加——選擇合適的模板設置即可

返回代碼新建一個對應的雲函數,配置對應的config.json
在這裏插入圖片描述
之後就是修改我們的雲函數,訂閱消息和之前的模板其實是有很多不同的。
具體步驟可以查看文檔

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html

首先就是在多了一個步驟,我們需要在設置好模板信息之後,詢問用戶是否訂閱消息,如果不訂閱消息是無法推送的。

那麼先設置雲函數

exports.main = async (event, context) => {
  try {
    const WXContext = cloud.getWXContext()
    const result = await cloud.openapi.subscribeMessage.send({
      touser: WXContext.OPENID, //獲取OPENID
      page: `/pages/blog-comment/blog-comment?blogId=${event.blogId}`, //用戶點擊會打開的界面
      lang: 'zh_CN',
      data: {
        thing3: {
          value: event.content
        },
        phrase2: {
          value: '一條新評價'
        },
        time1: {
          value: event.createTime
        }
      },
      templateId: '5LlPt7U4CNFnoje1ezPUJ9yeJcLv2LjnMdBw24ADqi8', //模板ID
      miniprogramState: 'developer'
    })
    return result
  } catch (err) {
    console.log(err)
    return err
  }
}

這裏需要注意的地方是訂閱消息使用的是subscribeMessage。另外一個就是我們data中的模板值。千萬千萬要看文檔,千萬千萬,否則真的會出很多問題。我在調試中就是吃了不少這種問題的哭。訂閱消息對於每個值都是做了規定的,類型不匹配就會卡你很久。

接下來就是先詢問用戶是否訂閱了雲函數,沒有訂閱的話需要訂閱。這個也有問題,根據小程序文檔寫的內容,我們只有在點擊觸發事件時纔可以調出訂閱消息模板,否則是無效的,還會報錯。
所以我將它放在了發佈評論的時候,其實訂閱功能更應該是放在頁面加載的時候,更合理。

 wx.requestSubscribeMessage({
        tmplIds: [templateId],
        success(res) {
          if (res[templateId] == 'accept') {
            wx.showToast({
              title: '訂閱成功',
            })
          } else {
            wx.showToast({
              title: '訂閱失敗',
            })
          }
        },
        fail(err) {
          console.log(err)
        }
      })

這裏需要注意的地方是tmplIds獲取到的值時array類型,不是string類型。
在判斷沒有問題,用戶發表的評論插入數據庫的時候,我們按照訂閱消息推送過去,綁定對應的值得信息

 wx.cloud.callFunction({
          name: 'tuiMessage',
          data: {
            content,
            blogId: this.properties.blogId,
            createTime:createTime
          }
        }).then((res) => {
          console.log(res)
        })


        wx.hideLoading()
        wx.showToast({
        title: '評論成功',
        })
        this.setData({
          modalShow: false,
          content: '' //彈窗消失,清空評論框的內容
        })
      })

    },
  },

在這個地方有發現一個問題,就是獲取的事件,不能獲取服務器端時間,因爲文檔中寫的,只能在調用雲數據庫的時候,纔可以使用“serverdata()”這個方法獲取時間。所以我使用了另外一個方法獲取的時間data.now(),並且使用之前的格式化時間函數將時間變爲符合規範要求的時間格式。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章