微信小程序基于云数据库简单实现帖子点赞功能。

思路:

1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid。获取帖子云数据存放到suju:[]里。

2·点击点赞按钮图标变换    点击点赞按钮,改变suju:[]里like属性,html读取suju:[]里面like属性实现图标变换。数字变换同理。

3·界面图标判断是否点过赞     遍历所有帖子的openid,放置到iszan列表里,遍历iszan列表,如果包含当前用户的openid,则把该帖子的like状态改为true,反正改为false。

上传数据看代码,这里不好说。

ps:题主是个新手,写有很多冗余代码,该方法的实现也没能达到高效。欢迎各位大佬按思路写出更高效简洁的代码。

云数据:

 wxml:

 <view class="love" style="display:flex" bindtap="dianzan" data-dianzannb="{{item.content.dianzan_number}}" data-id="{{item._id}}">
            <image lazy-load="true" src="/pages/talk/images/up-click.png" style="width:40rpx;height:40rpx" wx:if="{{!item.like}}"></image><!--没点赞-->
            <image lazy-load="true" src="/pages/talk/images/up.png" style="width:40rpx;height:40rpx" wx:else></image><!--已点赞-->
            <view class="dianzannb" style="font-size:78%;color:#656565;font-weight:lighter;margin-right:10rpx;">{{item.content.dianzan_number}}</view>
          </view>

js:

  //参数传递
  dianzan(e) {
    console.log("点赞传参", e)
    this.zan(e.currentTarget.dataset.id);
  },
  //具体实现
  zan(item_id) {
    //拿到openid
    app.getOpenid();
    this.setData({
      openid: app.globalData.openid
    });
    console.log('机主的openid', this.data.openid)

    db.collection('fatie').doc(item_id).get().then(res => {
      console.log('云数据', res)
      console.log('本地数据', this.data.suju)
      var num = res.data.content.dianzan_number;
      this.setData({
        like_people: res.data.like_people,
        dianzannb: num,
      })
      var like_people = this.data.like_people;
      console.log('点赞人的ID==》', this.data.openid)
      var iQ = this.data.suju.findIndex((value) => value._id == item_id);
      console.log('能不能返回位置==》', iQ)
      if (this.data.like_people.includes(this.data.openid) == true) { //已经点赞,要取消点赞
        console.log('查看是否运行IF-01');
        var that = this
        var openid = this.data.openid
        console.log('要删除的openid', openid);
        var like_people = this.data.like_people;
        var index = like_people.indexOf(openid);
        like_people.splice(index, 1);
        console.log('查看是否删除openid', this.data.like_people);
        --num;
        this.setData({
          dianzannb:num,
          [`suju[${iQ}].content.dianzan_number`]: num,
          like_people: this.data.like_people,
          [`suju[${iQ}].like`]: false, //数据中like为'false'是未点赞
          like : false
        })
        console.log('取消点赞成功', this.data.like_people)
        console.log('取消点赞成功--2', this.data.like)
      } else if (this.data.like_people.includes(this.data.openid) == false) { //未点赞,准备点赞
        console.log('查看是否运行IF-02');
        this.setData({
            like_people: this.data.like_people.concat(this.data.openid)
          })
          ++num;
        console.log('点赞成功', this.data.like_people)
        this.setData({
          dianzannb:num,
          [`suju[${iQ}].content.dianzan_number`]: num,
          like_people: this.data.like_people,
          [`suju[${iQ}].like`]: true,
          like:true
        })
        //console.log('取消点赞成功--2', this.data.like)
      }
      console.log('上传前的数据', this.data)
      db.collection("fatie").doc(item_id).update({
        data: {
          //like: this.data.like,
          ['content.' + 'dianzan_number']: this.data.dianzannb,
          like_people: this.data.like_people
        }
      }).then(res => {
        console.log('上传成功', this.data)
      })
    })
  },

界面图标判断是否点过赞js:

getcontent() {
    app.getOpenid();
    this.setData({
      openid: app.globalData.openid
    });
    wx.cloud.callFunction({
      name: "content_01"
    }).then(res => {
      console.log("云函数请求值", res);
      this.setData({
        suju: res.result.data
      })
      console.log('本地数据', this.data.suju)
      //下面是点赞事件的数据处理
      if (res.result.data) {
        for (var i = 0; i < res.result.data.length; i++) {
          var iszan = res.result.data[i].like_people
          if (iszan.includes(this.data.openid) == true) {
            this.setData({
              [`suju[${i}].like`]: true
            })
          } else if (iszan.includes(this.data.openid) == false) {
            this.setData({
              [`suju[${i}].like`]: false
            })
          }
        }
      }

    })
  },

借鉴文档

微信小程序基于云数据库实现点赞功能_ALKAO.UA的博客-CSDN博客_小程序实现点赞功能icon-default.png?t=M7J4https://blog.csdn.net/ALKAO_UA/article/details/108082915?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%82%B9%E8%B5%9E%E5%8A%9F%E8%83%BD&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-108082915.142^v44^control&spm=1018.2226.3001.4187

 微信小程序开通云开发并利用云函数获取Openid__龙衣的博客-CSDN博客icon-default.png?t=M7J4https://blog.csdn.net/ITxiaodong/article/details/101320816


版权声明:本文为qq_59117381原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。