1.在lostandfound.js檔案中加入點選評論圖示跳轉到評論頁面的方法

  /**
   * 跳轉到文章評論頁面
   */
  onTapToComment(event) {
    //獲取postId
    var postId = event.currentTarget.dataset.postId;
    console.log(postId);
    wx.navigateTo({
      url: 'comment/comment?id=' + postId,
    })

2.在comment.js的onload方法中接收lostandfound頁面傳遞來的postId

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var postId = options.id;//從上一個頁面獲取文章id

    //test
    console.log("comment.js ..." + postId);
  },

3.comment.js檔案，新增需要的資料，以及相應方法

// pages/lostandfound/comment/comment.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
     comments:[
       {
        authorImg:"/images/photo_1.jpg",
        author:"James",
        date:"11-17",
         content:"聚集著翹首以盼、興高采烈的當地民眾"
       },
       {
         authorImg: "/images/photo_1.jpg",
         author: "James",
         date: "11-17",
         content: "聚集著翹首以盼、興高采烈的當地民眾"
       },
       {
         authorImg: "/images/photo_1.jpg",
         author: "James",
         date: "11-17",
         content: "聚集著翹首以盼、興高采烈的當地民眾"
       },
       {
         authorImg: "/images/photo_1.jpg",
         author: "James",
         date: "11-17",
         content: "聚集著翹首以盼、興高采烈的當地民眾"
       },
     ],
     content:"",
  },

  //失去焦點時獲取裡面評論內容
  bindTextAreaBlur: function (e) {
    console.log(e.detail.value)
    this.setData({
      content: e.detail.value,
    })
  },

  //按鈕點選觸發事件 提交評論
  formSubmit(e){
    // this.bindTextAreaBlur();
    //test
    var content=this.data.content;
    if(content!=""){
      console.log("發表評論：" + content);
      //顯示成功
      wx.showToast({
        title: '發表成功',
        duration: 1000
      });

      //清空輸入框
      this.setData({
        content: ""
      })
    }
   
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var postId = options.id;//從上一個頁面獲取文章id

    //test
    console.log("comment.js ..." + postId);
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
 

4.comment.wxss檔案，加入需要的樣式表

/* pages/lostandfound/comment/comment.wxss */

.page{
  margin: 10rpx 10rpx 10rpx 10rpx;
}
.userMsg{
  display: flex;
  flex-direction: row;
}

.name-date{
  display: flex;
  flex-direction: column;
}
.userMsg-name{
  font-size: smaller;
  margin-left: 20rpx;
}

.userMsg-date{
  font-size:small;
  margin-top: 10rpx;
  margin-left: 20rpx;
}
.comment-content{
  font-size: small;
  margin-left: 30rpx;
  margin-top: 20rpx;
}

/*分割線樣式*/
.divLine{
  margin-top: 30rpx;
 background: #E0E3DA;
 width: 100%;
 height: 5rpx;
}

/*固定在底部的評論框*/
.comment-send{
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  border-top-style: solid;
  border-width: 3rpx;
  border-color: rgba(100, 94, 86, 0.856)
}

.comment-form{
  margin-top: 5rpx;
  margin-left: 20rpx;
  height: 100rpx;
  width: 70%;

}
.comment-input{
  width: 100%;
}
.comment-image{
  width: 50rpx;
  height: 50rpx;
}

.comment-button{
  position: absolute;
  right: 5rpx;
  top: 5rpx;
  height: 20rpx;
}
.btn{
  background-color: rgb(23, 167, 250);
}
5.comment.json檔案新增需要用的的元件

  {
      "navigationBarTitleText": "評論",
      "usingComponents": {
        "w-avatar": "/dist/w-avatar/index",
          "w-input": "/dist/w-input/index",
          "w-cell-group": "/dist/w-cell-group/index"
      }
  }
 

6.comment.wxml檔案的編寫

 <!--pages/lostandfound/comment/comment.wxml-->
  <view class='page'>
    <block wx:for="{{comments}}" wx:for-item="item" wx:for-index="index">
        <view class='userMsg'>
      	<w-avatar size="large" src="{{item.authorImg}}">W</w-avatar>
        <view class='name-date'>
           <text class='userMsg-name'>{{item.author}}</text>
           <text class='userMsg-date'>{{item.date}}</text>
        </view>
    </view>
    <view>
      <text class='comment-content'>{{item.content}}</text>
    </view>
    <view class='divLine'></view>
    </block>
  
  </view>
    <!-- 固定在底部的評論框-->
    <view class='comment-send'>
  
         <!-- <input placeholder="寫評論" maxlength="200"></input> -->
      <image class='comment-image' src='/images/wx_app_comment.jpg'></image>
  	<!-- <w-input
  	 clear
  	 count="100"
  	 type="textarea"
  	 placeholder="評論"
  	/> -->
  
      <!-- 評論表單-->
      <form class='comment-form' bindsubmit='formSubmit'>
         <textarea placeholder="寫評論" maxlength="200"  cursor-spacing="30" bindblur='bindTextAreaBlur' class='comment-input' value='{{content}}'></textarea>
  
      <view class='comment-button'>
            <button  size='mini' class='btn' formType='submit'>發表</button>
      </view>
  
      </form>
         
     
    </view>

7.comment頁面執行效果圖