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

以下是一个简单的微信小程序朋友圈评论与回复的前端代码：

<!-- 页面结构 -->
<view class="page">
  <!-- 朋友圈内容 -->
  <view class="post">
    <image class="avatar" src="{{ post.avatar }}"></image>
    <view class="post-content">
      <view class="post-header">
        <text class="nickname">{{ post.nickname }}</text>
        <text class="timestamp">{{ post.timestamp }}</text>
      </view>
      <view class="post-text">{{ post.text }}</view>
    </view>
  </view>
  <!-- 评论列表 -->
  <view class="comment-list">
    <view class="comment" wx:for="{{ comments }}">
      <image class="avatar" src="{{ item.avatar }}"></image>
      <view class="comment-content">
        <view class="comment-header">
          <text class="nickname">{{ item.nickname }}</text>
          <text class="timestamp">{{ item.timestamp }}</text>
        </view>
        <view class="comment-text">{{ item.text }}</view>
      </view>
      <!-- 回复列表 -->
      <view class="reply-list">
        <view class="reply" wx:for="{{ item.replies }}">
          <image class="avatar" src="{{ item.avatar }}"></image>
          <view class="reply-content">
            <view class="reply-header">
              <text class="nickname">{{ item.nickname }}</text>
              <text class="timestamp">{{ item.timestamp }}</text>
            </view>
            <view class="reply-text">{{ item.text }}</view>
          </view>
        </view>
      </view>
      <!-- 回复输入框 -->
      <view class="reply-input">
        <input class="input" placeholder="回复评论" bindinput="onReplyInput"></input>
        <button class="button" bindtap="onReplySubmit">发送</button>
      </view>
    </view>
  </view>
</view>

// 页面逻辑
Page({
  data: {
    post: {
      avatar: 'https://example.com/avatar.jpg',
      nickname: '小明',
      timestamp: '2022-01-01 12:00:00',
      text: '今天天气真好！'
    },
    comments: [
      {
        avatar: 'https://example.com/avatar.jpg',
        nickname: '小红',
        timestamp: '2022-01-01 12:10:00',
        text: '是啊，阳光明媚！',
        replies: []
      },
      {
        avatar: 'https://example.com/avatar.jpg',
        nickname: '小李',
        timestamp: '2022-01-01 12:20:00',
        text: '好想出去玩啊！',
        replies: [
          {
            avatar: 'https://example.com/avatar.jpg',
            nickname: '小张',
            timestamp: '2022-01-01 12:30:00',
            text: '我们一起去吧！'
          }
        ]
      }
    ],
    replyCommentIndex: -1,
    replyInputValue: ''
  },

  // 监听回复输入框内容
  onReplyInput(event) {
    this.setData({
      replyInputValue: event.detail.value
    })
  },

  // 提交回复
  onReplySubmit() {
    const { replyCommentIndex, replyInputValue } = this.data
    if (replyInputValue.trim().length === 0) {
      wx.showToast({
        icon: 'none',
        title: '回复内容不能为空'
      })
      return
    }
    const reply = {
      avatar: 'https://example.com/avatar.jpg',
      nickname: '我',
      timestamp: new Date().toLocaleString(),
      text: replyInputValue
    }
    if (replyCommentIndex === -1) {
      // 回复评论
      const comments = this.data.comments
      comments.push({
        avatar: 'https://example.com/avatar.jpg',
        nickname: '我',
        timestamp: new Date().toLocaleString(),
        text: replyInputValue,
        replies: []
      })
      this.setData({
        comments,
        replyInputValue: ''
      })
    } else {
      // 回复回复
      const comments = this.data.comments
      const replies = comments[replyCommentIndex].replies
      replies.push(reply)
      comments[replyCommentIndex].replies = replies
      this.setData({
        comments,
        replyCommentIndex: -1,
        replyInputValue: ''
      })
    }
  },

  // 点击评论的回复按钮
  onCommentReply(event) {
    const commentIndex = event.currentTarget.dataset.index
    this.setData({
      replyCommentIndex: commentIndex
    })
  }
})

在这个代码中，我们首先定义了一个页面结构，包含一个朋友圈内容和一个评论列表。评论列表中包含多个评论，每个评论下面还有一个回复列表和一个回复输入框。我们使用了`wx:for`指令来渲染列表数据。

在页面逻辑中，我们监听了回复输入框的内容变化和回复按钮的点击事件。当用户输入回复内容并点击发送按钮时，我们会根据当前的界面状态来判断是回复评论还是回复回复，并将新的回复添加到对应的评论或回复列表中。同时，我们还对空内容做了校验，并在用户输入空内容时弹出提示框。

最后，我们还监听了评论的回复按钮的点击事件，并将当前回复的评论索引保存在`replyCommentIndex`变量中。这个变量的值为-1时表示用户正在回复评论而不是回复回复。