微信小程序朋友圈评论前端代码

以下是微信小程序朋友圈评论的前端代码示例：

<!-- wxml -->
<view class="comment-wrap">
  <view class="comment-input-wrap">
    <input class="comment-input" placeholder="说点什么吧" bindinput="inputComment" value="{{commentContent}}"></input>
    <button class="comment-btn" bindtap="submitComment">发送</button>
  </view>
  <view class="comment-list">
    <block wx:for="{{commentList}}" wx:key="{{item.id}}">
      <view class="comment-item">
        <text class="comment-username">{{item.username}}：</text>
        <text class="comment-content">{{item.content}}</text>
      </view>
    </block>
  </view>
</view>

/* wxss */
.comment-wrap {
  margin-top: 10px;
  background-color: #f5f5f5;
  padding: 10px;
}

.comment-input-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-input {
  flex: 1;
  height: 30px;
  border: none;
  outline: none;
  background-color: #fff;
  padding: 0 10px;
  border-radius: 15px;
}

.comment-btn {
  width: 60px;
  height: 30px;
  background-color: #007aff;
  color: #fff;
  border: none;
  outline: none;
  border-radius: 15px;
  margin-left: 10px;
}

.comment-list {
  margin-top: 10px;
}

.comment-item {
  margin-bottom: 10px;
}

.comment-username {
  font-weight: bold;
}

.comment-content {
  margin-left: 10px;
}

// js
Page({
  data: {
    commentContent: '', // 输入框内容
    commentList: [
      { id: 1, username: '小明', content: '好看的照片' },
      { id: 2, username: '小红', content: '太美了' },
      { id: 3, username: '小刚', content: '这个角度拍的真好' },
    ], // 评论列表
  },

  // 监听输入框内容的变化
  inputComment(e) {
    this.setData({
      commentContent: e.detail.value,
    });
  },

  // 提交评论
  submitComment() {
    const { commentContent, commentList } = this.data;
    if (!commentContent.trim()) {
      wx.showToast({
        title: '请输入评论内容',
        icon: 'none',
      });
      return;
    }
    const newCommentList = [...commentList, {
      id: new Date().getTime(), // 生成唯一id
      username: '匿名用户',
      content: commentContent,
    }];
    this.setData({
      commentContent: '',
      commentList: newCommentList,
    });
  },
});

这段代码实现了一个简单的朋友圈评论功能，包括输入框、发送按钮和评论列表。用户输入评论内容后，点击发送按钮可以将评论添加到评论列表中。这个示例可以帮助你了解微信小程序的基本语法和实现评论功能的思路。