更新记录

1.0.1（2025-10-29） 下载此版本

1.解决组件依赖引起的插件找不到问题； 2.将宠物圈数据在父组件中定义，子组件直接引用；

1.0.0（2025-10-28） 下载此版本

点赞 / 取消点赞（支持计数和状态切换） 评论（输入框提交，显示评论列表） 收藏 / 取消收藏（记录用户收藏状态）

平台兼容性

uni-app(3.6.12)

其他

# First Extension For HBuilderX

开发文档参考：https://hx.dcloud.net.cn

在 UniApp 中实现朋友圈的评论、点赞、收藏功能，核心是通过 数据绑定 + 事件交互 + 状态管理 实现，并结合本地存储或接口请求持久化数据。

一、功能设计与数据结构

1. 核心功能

点赞 / 取消点赞（支持计数和状态切换） 评论（输入框提交，显示评论列表） 收藏 / 取消收藏（记录用户收藏状态）

2. 数据结构设计

朋友圈列表数据 moments 可定义为数组，每个元素包含动态详情、点赞列表、评论列表、收藏状态等：

const moments = ref([
      {
        id: 1,
        user: { avatar: '/static/dog.png', name: '豆豆' },
        content: '今天天气真好！',
        images: ['/static/cat01.png','/static/cat02.png'],
        createTime: '2025-10-30 10:00',
        likeList: [{ id: 101, name: '李四' }],
        commentList: [
          { id: 201, userId: 102, userName: '王五', content: '确实不错！', createTime: '2025-10-30 10:05' }
        ],
        isCollected: false,
        isLiked: false // 记录当前用户是否点赞（初始为false）
      },
      {
        id: 2,
        user: { avatar: '/static/dog.png', name: '快乐的小天使' },
        content: '今天天气真好！',
        images: ['/static/dog.png'],
        createTime: '2025-10-30 10:00',
        likeList: [{ id: 101, name: '豆豆' }],
        commentList: [
          { id: 201, userId: 102, userName: '贝贝', content: '确实不错！', createTime: '2025-10-30 10:05' }
        ],
        isCollected: false,
        isLiked: false // 记录当前用户是否点赞（初始为false）
      }
    ]);

二、关键功能说明

点赞逻辑：

通过 isLiked 记录当前用户是否点赞，点击时切换状态。 点赞时将当前用户添加到 likeList，取消时移除，同步更新点赞数。

评论功能：

点击 “评论” 显示输入框（通过 showCommentInput 控制显示索引）。 输入内容后提交，动态添加到 commentList 并清空输入框。

收藏功能：

通过 isCollected 记录收藏状态，点击时直接切换，无需额外数据结构。

数据持久化：

实际项目中，需将操作通过 uni.request 同步到后端接口（如点赞 / 评论 / 收藏的 API）。 页面初始化时，从接口拉取最新的朋友圈数据（包含点赞、评论、收藏状态）。

兼容 UniApp 多端（微信小程序、H5、App），核心逻辑通过响应式数据驱动，可直接复用或根据需求扩展。

三、UI 布局实现（模板部分）

使用 v-for 遍历朋友圈列表，分别实现点赞、评论、收藏的交互区域：