微信小程序评论区功能代码

以下是微信小程序评论区功能的代码示例：

1. 在小程序 WXML 文件中添加评论区的 HTML 结构：

<!-- 评论列表 -->
<view class="comment-list">
  <block wx:for="{{commentList}}" wx:key="index">
    <view class="comment-item">
      <view class="comment-user">
        <image src="{{item.avatarUrl}}" class="user-avatar"></image>
        <text class="user-name">{{item.nickName}}</text>
      </view>
      <view class="comment-content">
        <text>{{item.content}}</text>
        <view class="comment-date">{{item.createTime}}</view>
      </view>
    </view>
  </block>
</view>

<!-- 评论输入框 -->
<view class="comment-input">
  <input placeholder="请输入评论内容" bindinput="onInput"></input>
  <button class="btn" bindtap="onSubmit">提交</button>
</view>

2. 在小程序 JS 文件中添加评论区的逻辑代码：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    commentList: [], // 评论列表
    commentContent: '' // 评论内容
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取评论列表
    this.getCommentList()
  },

  /**
   * 获取评论列表
   */
  getCommentList: function () {
    wx.request({
      url: 'https://api.example.com/comments',
      success: res => {
        this.setData({
          commentList: res.data
        })
      }
    })
  },

  /**
   * 输入框输入事件
   */
  onInput: function (e) {
    this.setData({
      commentContent: e.detail.value
    })
  },

  /**
   * 提交评论
   */
  onSubmit: function () {
    // 发送评论内容到后端保存
    wx.request({
      url: 'https://api.example.com/comments',
      method: 'POST',
      data: {
        content: this.data.commentContent
      },
      success: res => {
        // 保存成功后刷新评论列表
        this.getCommentList()
        // 清空输入框
        this.setData({
          commentContent: ''
        })
      }
    })
  }
})

3. 在小程序 CSS 文件中添加评论区的样式：

.comment-list {
  margin-top: 20rpx;
}

.comment-item {
  display: flex;
  margin-bottom: 20rpx;
}

.comment-user {
  width: 80rpx;
  margin-right: 10rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.user-name {
  font-size: 24rpx;
  color: #333;
}

.comment-content {
  flex: 1;
}

.comment-date {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.comment-input {
  display: flex;
  margin-top: 20rpx;
}

.comment-input input {
  flex: 1;
  border: none;
  background-color: #f5f5f5;
  padding: 10rpx;
  border-radius: 5rpx;
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.comment-input button {
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}

以上代码仅供参考，具体实现还需要根据自己的业务需求进行调整。同时，注意在实现评论区时需要注意用户隐私和安全，如对评论内容进行过滤和审核，以及对用户信息进行保护等。