微信小程序端的点赞功能其实没什么好介绍的，无非就是调用接口改变点赞状态和点赞数量。需要注意的是取消点赞时的处理，我这里为了减少服务器接口的调用，直接本地存一个变量，修改这里的变量值即可。

由于源码都相对简单，这里就直接贴源码了。

wxml布局源码如下：

 <view class="button-area" catchtap="onLikeClick">
      <block wx:if="{{isLike}}">
        <text class="text-like-count">{{likeCount}}</text>
        <l-icon name="like" color="#FFE57F" size="50" />
      </block>
      <block wx:else>
        <text class="text-like-count">{{likeCount}}</text>
        <l-icon name="like" color="#34BFA3" size="50" />
      </block>

    </view>

布局实现主要就是通过判断语句根据不同的点赞状态显示不同的布局。

js 逻辑控制代码如下：

  onLikeClick(e) {
    let that = this
    if (this.data.bookIsLike) {
    // 取消赞
      likeModel.cancelLike(this.data.bk_id)
        .then(res => {
          this.data.bookIsLike = false
          if (this.data.like_count > 0){
            this.data.like_count = this.data.like_count - 1
          }
          this.setData({
            likeCount: this.data.like_count,
            isLike: that.data.bookIsLike
          });
        })

    } else {
    //点赞
      likeModel.like(this.data.bk_id)
        .then(res => {
          this.data.bookIsLike = true
          this.setData({
            likeCount: this.data.like_count + 1,
            isLike: that.data.bookIsLike
          });
        })
    }
  },

逻辑处理也是根据不同的点赞状态调用相应的接口，根据返回的结果渲染wxml即可。

这里的likeModel就是封装的点赞接口，源码如下：

import {
  HTTP
}
  from '../utils/http.js'

// 获取服务器接口地址
const api = require('../config/config.js');

class LikeModel extends HTTP {
  data = null

  /**
  * 喜欢书籍的状态
  */
  userLikeIt(bid) {
    return this.request({
      url: api.getBookLike,
      data: {
        bkid: bid
      },
    })
  }

  /**
   * 喜欢书籍
   */
  like(bid) {
    return this.request({
      url: api.like,
      method: 'POST',
      data: {
        bkid: bid
      },
    })
  }

  /**
   * 取消喜欢书籍
   */
  cancelLike(bid) {
    return this.request({
      url: api.cancelLike,
      method:'POST',
      data: {
        bkid: bid
      },
    })
  }
}

export {
  LikeModel
}

以上就是本次的介绍。

扫码关注公众号，轻撩即可。

全栈项目|小书架|微信小程序-点赞功能实现