1. 程式人生 > >小程序評論區動態刷新

小程序評論區動態刷新

每次 顯示 cti username tex icon define 哪裏 最新

還是前兩天的小程序,用戶的個人主頁需要有評論區,發布評論之後需要把評論寫到數據庫,同時動態更新評論區。

評論的數據庫設計如下:

技術分享圖片

POST請求將評論發送給後臺

ownerID獲得不太難,之前進入主頁的時候已經把用戶名給傳進來了,那麽commenterID要怎麽獲得呢?

可以在app.js裏面定義全局數組,當用戶成功登錄後,把從數據庫查詢相關信息存儲來記錄用戶的相關信息,需要的時候調取即可。

//app.js
App({ ...... user:{ userID:
-1, userName:"", hometown:"", modelID:
-1 } ...... }

至於time如何獲得,可以借助微信提供的API獲取時間然後再轉換格式。

util.formatTime(new Date());
//pages/homepage/homepage.js
  comment:function(e){
    var that = this;
    var frmData={};
    frmData.commenterID = app.user.userID;
    //從全局data獲取評論者ID
    frmData.text = e.detail.value.text;
    //從當前主頁獲取被評論者ID
frmData.ownerID = this.data.owner.userID; //加入時間 frmData.time = util.formatTime(new Date()); console.log("評論內容:"); console.log(JSON.stringify(frmData)); wx.request({ url: ‘http://localhost:8080/addComment‘, method: ‘POST‘, data: JSON.stringify(frmData), header: {
‘Content-Type‘: ‘application/json‘ }, success: function (res) { if (res.data != null &&res.data != ‘‘) { wx.showToast({ title: ‘發表成功‘, icon: ‘‘, duration: 2000 }) //動態更新評論區 } else { wx.showToast({ title: ‘發表失敗‘, icon: ‘‘, duration: 2000 }) } }, fail:res=>{ console.log(res.data); } }) }

可以看到我是在comment函數裏面定義的frmData數組來存儲評論相關信息,這個地方我本來是想在頁面裏邊定義一直使用,就不用每次臨時獲取commenterID了,但是一直報錯frmData未定義,最後只能在comment函數

裏面臨時定義數組了,如果有朋友知道是哪裏的問題,麻煩評論一下,感激不盡。

thirdScriptError
frmData is not defined;at pages/homepage/homepage page comment function
ReferenceError: frmData is not defined

動態更新評論區

評論成功寫入數據庫後,需要實時更新評論區,這裏采用的是將frmData加到comment數組裏面,配合wx:for動態更新評論區。

(comment數組在頁面初始化的時候,就已經把查詢到的數據放進去了)

<view class="title_text">
  <text>評論列表</text>
</view>

<!--顯示評論區-->
<view wx:for="{{comment}}">
用戶ID:{{item.commenterID}}  {{item.time}}
  <view>
  評論內容:{{item.text}}
  </view>
</view>

數組有個函數叫concat,用來連接和拓展數組,雙方可以都是數組,也可以是數組和元素。

我剛開始想的是把frmData接到comment後面,但是comment初始化的時候,數據會不斷往後頂,就跟堆棧似的。

就比如說數據庫的數據是按07/01 07/02存放的,取出來comment會是07/02 07/01的順序,但是我今天07/06的數據再跟到後面,數據就變成了07/02 07/01 07/06,是不是怪怪的。。

所以就換了個辦法,先把frmData放到數組A裏面,然後把comment接到A後面就好了,這樣評論順序就是倒序的,評論時間新的會在前面。

       //將comment數組添加到新評論frmData後面
          //實現時間倒序,評論時間最新的會被顯示到最前面
          //wx:for將會實時更新評論列表
          var newComment=[frmData];
          that.data.comment = newComment.concat(that.data.comment);
          that.setData({
            comment: that.data.comment,
          });

效果如圖:

技術分享圖片

今天的工作還有完善小程序登錄,阻止封禁用戶登錄,沒什麽記錄的價值,就不寫了。

小程序評論區動態刷新