微信小程序仿朋友圈_微信小程序模拟朋友圈静态-CSDN博客

本文链接：https://blog.csdn.net/m0_58699900/article/details/120060210

这篇博客详细介绍了如何使用微信小程序实现在线好友列表的展示，以及动态、评论、点赞和举报功能。通过`<scroll-view>`组件展示好友头像，利用`wx:for`循环遍历动态数据，包括用户信息、资源类型判断、位置和标签展示。同时，实现了点赞状态的判断和更新，评论、举报功能的触发，以及举报弹框的显示与操作。此外，还展示了CSS样式和JS逻辑处理，包括请求接口和事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

顶部实现在线好友的展示

<view>
  <text>好友列表</text>
  <scroll-view class="header" scroll-x="true">
    <block wx:for="{{friends}}" wx:key="friends">
      <view class="avatar">
        <l-avatar size="100" text="{{item.nickname}}" placement="bottom" src="{{item.avatar_url}}" />
      </view>
    </block>
  </scroll-view>
</view>

动态+评论+点赞+举报

<block wx:for="{{message}}" wx:key="message">
  <view style="margin-bottom: 60px;margin-top: 10px;">
    <view>
      <view class="album">
        <l-avatar class="avatar" size='80' shape="square" src="{{item.avatar_url}}" />
        <view class="right">
          <view class="name">{{item.nickname}}</view>
          <view class="name" style="font-size: 14px;">{{item.created_at}}</view>
          <view class='content'>{{item.title}}</view>
          <block wx:if="{{item.resource_type == 1}}">
            <l-album urls='{{item.resource_path}}'></l-album>
          </block>
          <block wx:if="{{item.resource_type == 2}}">
            <video show-center-play-btn='{{true}}' show-play-btn="{{true}}" src="{{item.resource_path}}"></video>
          </block>
        </view>
      </view>
    </view>
    <block wx:if="{{item.address != null}}">
      <view style="margin-left: 30px;margin-top: 20px;font-size: 12px;">
        <l-tag shape="circle">位置：{{item.address}}</l-tag>
      </view>
    </block>
    <block wx:if="{{item.label != null}}">
      <view style="display: flex;flex-wrap: nowrap;">
        <block wx:for="{{item.label}}" wx:for-item="label">
          <view style="margin-left: 30px;margin-top: 20px;font-size: 12px;">
            <l-tag shape="circle" plain="{{true}}">#{{label.label_name}}</l-tag>
          </view>
        </block>
      </view>
    </block>
    <view style="float: right;margin-right: 20px;">
      <block wx:if="{{item.is_like == false}}">
        <image style="width: 50rpx;height: 50rpx;" src="/images/icon/like.png" data-id="{{item.id}}" bindtap="like">
        </image>
      </block>
      <block wx:if="{{item.is_like == true}}">
        <image style="width: 50rpx;height: 50rpx;" src="/images/icon/like_selected.png" data-id="{{item.id}}"
          bindtap="like"></image>
      </block>
    </view>
    <view style="float: right;margin-right: 20px;">
      <image style="width: 50rpx;height: 50rpx;" src="/images/icon/comment.png" data-id="{{item.id}}" bindtap="comment">
      </image>
    </view>
    <view style="float: right;margin-right: 20px;">
      <image style="width: 50rpx;height: 50rpx;" src="/images/icon/report.png" data-message_id="{{item.id}}"
        data-user_id="{{item.user_id}}" bindtap="report">
      </image>
    </view>
    <view style="float: right;margin-right: 20px;">
      <button style="width: 50rpx;height: 50rpx;font-size: 5px;" open-type="share">
        <l-icon name="share" color="#cdcdcd" size="30" />
      </button>
    </view>
    <view style="margin-left: 30px;margin-top:60rpx;">
      评论
      <block wx:for="{{item.comment}}" wx:key="comment" wx:for-item="comment">
        <view style="margin-top: 10px;">
          <text class="name" style="margin-top: 10px;">{{comment.user.nickname}}</text>
          <text style="padding-left: 10px;font-size: 14px;color: #999;">{{comment.content}}</text>
        </view>
      </block>
    </view>
  </view>
</block>
<l-dialog show="{{report}}" type="confirm" title="举报" content="确定举报该用户吗" bind:linconfirm="addReport" />

wxss：

.header{
  width: 100%;
  white-space: nowrap;
  margin-top: 10px;
}

.avatar{
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.album {
  display: flex;
  flex-direction: row;
}

.avatar {
  margin-left: 20rpx;
}

.right {
  margin-left: 20rpx;
}

.name {
  color: rgb(91, 108, 160);
  font-weight: 450;
}

.content {
  margin-top: 7rpx;
  margin-right: 10rpx;
  color: black;
  font-weight: 445;
  margin-bottom: 15rpx;
}

.line {
  height: 1px;
  border-top: solid Silver 1px;
  margin-bottom: 40rpx;
  margin-top: 30rpx;
}

js：（暂无后端接口，请自行编写接口）

const app = getApp()

Page({
  data: {
    friends:[],//存放好友数据
    message:[],//存放动态列表的数据
    report:false,//是否显示举报弹框
    report_user_id:'',//举报的用户
    message_id:''//动态id
  },
  onLoad() {
    let token = wx.getStorageSync('token')
    //请求好友列表接口
    wx.request({
      url: '',
      header:{token},
      success:res=>{
        this.setData({
          friends:res.data.data
        })
      }
    })
    //请求列表展示接口
    wx.request({
      url: '',
      header:{token},
      success:res=>{
        let message = res.data.data.data
        let like_message_id = res.data.data.like_message_id
        //判断是否点赞
        message.map(function(v,k){
          if (like_message_id.indexOf(v.id) != -1){
            message[k]['is_like'] = true
          }else{
            message[k]['is_like'] = false
          }
        })
        this.setData({
          message
        })
      }
    })
  },
  //点赞、取消点赞
  like(e){
    let token = wx.getStorageSync('token')
    let message = this.data.message
    let message_id = e.target.dataset.id
    //循环动态列表数据
    message.map(function(v,k){
      //判断该用户点击的是哪篇文章
      if (message_id == v.id){
        //如果已点赞 则取消点赞
        if(v.is_like == true ){
          message[k]['is_like'] = false
        }else{
          //如果未点赞 则点赞
          message[k]['is_like'] = true
        }
      }
    })
    this.setData({
      message
    })
    //先将数据替换后再请求接口
    wx.request({
      url: '',
      data:{message_id},
      header:{token},
      success:res=>{
        
      }
    })
  },
  //跳转发表评论页面
  comment(e){
    let message_id = e.target.dataset.id
    wx.reLaunch({
      //路径自定义
      url: '/pages/comment/comment?message_id='+message_id,
    })
  },
  //举报
  report(e){
    //得到举报的用户id
    let report_user_id = e.target.dataset.user_id
    //得到举报的文章id
    let message_id = e.target.dataset.message_id
    let token = wx.getStorageSync('token')
    //请求判断是否举报过该用户接口
    wx.request({
      url: '',
      data: {report_user_id,message_id},
      header: {token},
      method:'POST',
      success:res=>{
        //举报过该用户 给出提示
        if(res.data.code != 1){
          wx.showToast({
            title: res.data.msg,
            icon:'none'
          })
        }else{
          //弹出对话框
          this.setData({
            report_user_id,
            message_id,
            report:true
          })
        }
      }
    })
  },
  //举报发布动态的用户
  addReport(){
    let token = wx.getStorageSync('token')
    let report_user_id = this.data.report_user_id
    let message_id = this.data.message_id
    wx.request({
      url: '',
      data: {report_user_id,message_id},
      header: {token},
      method:'POST',
      success:res=>{
        wx.showToast({
          title: res.data.msg,
          icon:'none'
        })
      }
    })
  }
})

微信小程序 仿朋友圈

微信小程序仿朋友圈