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

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

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
}

以上就是本次的介绍。


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

全栈项目|小书架|微信小程序-点赞功能实现的更多相关文章

  1. 全栈项目|小书架|微信小程序-登录及token鉴权

    小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...

  2. 全栈项目|小书架|微信小程序-项目结构设计分包

    前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9 ...

  3. 全栈项目|小书架|微信小程序-首页水平轮播实现

    首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...

  4. 全栈项目|小书架|微信小程序-实现搜索功能

    效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...

  5. 全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能

    效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...

  6. 全栈项目|小书架|微信小程序-书籍详情功能实现

    效果图 实现分析 从效果图上分析,书籍详情是通过点击首页的item后进入. 进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口. 点击登录之后即可加载出用户评 ...

  7. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下 ...

  8. 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

    通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...

  9. 全栈项目|小书架|服务器开发-NodeJS 使用 JWT 实现登录认证

    通过这篇 全栈项目|小书架|服务器开发-JWT 详解 文章我们对JWT有了深入的了解,那么接下来介绍JWT如何在项目中使用. 安装 $ npm install jsonwebtoken 生成 Toke ...

随机推荐

  1. 在微信小程序页面间传递数据总结

    在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...

  2. Vue与REACT两个框架的区别和优势对比

    VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...

  3. selenuim自动化爬取汽车在线谷米爱车网车辆GPS数据爬虫

    #为了实时获取车辆信息,以及为了后面进行行使轨迹绘图,写了一个基于selelnium的爬虫爬取了车辆gps数据. #在这里发现selenium可以很好的实现网页解析和处理js处理 #导包 import ...

  4. ModuleNotFoundError: No module named 'rest_framework_swagger'

    pip3.6 install django-rest-swagger

  5. 【Beta】Phylab 测试报告

    PhyLab Beta 测试报告 测试中发现的bug Beta阶段新Bug Bug 可能原因 markdown生成的报告可能溢出显示框 表格过长,显示框未设置横向溢出 移动端实验区无法评论 移动端社区 ...

  6. asp.net core session使用

    一.配置回话状态 Microsoft.AspNetCore.App metapackage 中包含的 Microsoft.AspNetCore.Session 包提供中间件来管理会话状态. 若要启用会 ...

  7. Mysql:设置主键自动增长起始值

    比较郁闷昨天在家使用‘alter table `tablename` AUTO_INCREMENT=10000;’怎么也不起效,但是今天下班时间公司一同事尝试了一下就可以了.搞不明白自己当时是怎么操作 ...

  8. DNA replication timing数据库 - Replication Domain

    DNA Replication Timing ReplicationDomain: a visualization tool and comparative database for genome-w ...

  9. Windows Server 2012 R2 卸载IE浏览器

    If you run any Windows Servers, you may run into a scenario where you want to remove access to Inter ...

  10. SpringBoot项目中普通类获取http相关的类(request/response/session)

    import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import ...