微信小程序收藏功能

最新推荐文章于 2023-01-18 07:00:00 发布
最新推荐文章于 2023-01-18 07:00:00 发布
阅读量1.4k 收藏 10
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47038177/article/details/106951910
版权

首先在wxml页面布局： （我这里简单的步了个局）
我这里简单的布了个局
这里我们用的技术栈就是wx：if，用它来判断收藏状态。catchtap是点击事件，点击切换收藏的状态。下面上js代码。
在这里插入图片描述
这样一个收藏功能加提示就做好了。

大鼻子的四色鸳鸯
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 实现点击收藏功能
qq_47811744的博客
04-07 2681
自己刚接触小程序，在网上找了很多的收藏的代码，但是发现都点击收藏后，退出去再回来已收藏又变成未收藏状态，然后自己就改改改 拼拼凑凑终于改了出来 就是代码有些复杂 感觉可以更简便 但是我还没有找到方法 在这里记录一下 有大佬也可以指点一下 .wxml代码 <viewclass="save"> <textclass="saveText">{{isClick?'已收藏':'收藏'}}</text> <imagestyle="h...
微信小程序中的收藏功能（包含用户需求，数据库设计，后台功能，微信小程序功能，效果截图等）
最新发布
2301_76238237的博客
04-21 789
由于篇幅有限，这里就不一一罗列了，20道常见面试题（含答案）+21条MySQL性能调优经验小编已整理成Word文档或PDF文档还有更多面试复习笔记分享如下《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！” />由于篇幅有限，这里就不一一罗列了，20道常见面试题（含答案）+21条MySQL性能调优经验小编已整理成Word文档或PDF文档[外链图片转存中…(img-nNk94JSW-1713681119722)]还有更多面试复习笔记分享如下。
【微信小程序】收藏功能的实现(条件渲染、交互反馈)
m0_55394328的博客
01-18 5749
哈喽大家好，本期是微信小程序专栏第十九期。每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序实现收藏功能
多喝开水
05-25 1万+
微信小程序收藏 前言 这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏，在另一个页面出现目前点击收藏的项目。需要的朋友可以参考下。 1.首先在wxml文件中添加点击事件 // 收藏 <view bindtap="haveSave"> <image class="save " src="{{isClick?'/images/xing2.png':'/images/xing1.png'}}" ></image> <
微信小程序云开发之收藏文章功能的简单实现
sdqmrj的博客
08-27 5051
简单实现收藏文章并展示在收藏界面
小程序—点击收藏功能
记录点滴
02-10 9484
最近整理了小程序中收藏功能的编写方法，因为未涉及到后端，所以我是通过小程序中的缓存来模拟此功能，废话不多说直接开干！ wxml中的代码如下： <view> <image catch:tap="handleClickShow" wx:if="{{isShow}}" src="sc1.png" /> <image catch:tap="handleCli...
微信小程序实例--知乎日报小程序
chuti6853的博客
08-04 692
微信小程序开发文档 https://mp.weixin.qq.com/debug/wxadoc/dev/?t=20161107 使用步骤 下载微信小程序开发工具 微信小程序注册申请 ，获取AppID(手机预览需用到) 服务器配置 ，添加合法域名，每个月只可修改3次 ，可...
微信小程序收藏功能的实现代码
08-27
微信小程序收藏功能的实现代码详解 微信小程序收藏功能的实现代码是指在小程序中实现点击收藏后显示已收藏，并在另一个页面出现目前点击收藏的项目的功能。本文将详细介绍微信小程序收藏功能的实现代码的技术要点和...
微信小程序源码-仿酷狗音乐微信小程序
09-28
5. 数据持久化：利用微信小程序的本地缓存或数据库API，保存用户的播放历史、收藏歌曲等信息，实现用户个性化体验。 通过分析和学习这个“仿酷狗音乐微信小程序”的源码，开发者不仅可以提升微信小程序的编程技巧，...
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
微信小程序实现收藏与取消收藏切换图片功能
12-29
wxml界面使用image标签 <image wx:if={{collected}} catchtap='onCollectionTap' src='/images/icon/collection.png'></image> <image src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></...
微信小程序日记——高仿知乎日报（中）
饥渴计科极客杰铿的博客
10-21 5424
该小程序的作者是Oopsguy，我也参与小功能的开发和完善，希望大家能支持一下 本人对知乎日报是情有独钟，看我的博客和github就知道了，写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html，css，js有一定的基础，还有对微信小程序的API也要非常熟悉我将该教程分为以下三篇 微信小程序日记——高仿知乎日报（上） 微信小程序日记——高仿知乎日报（中） 微信小程序日记——高仿知乎日报（
微信小程序 收藏成功提示（九）
chenna1102cn的博客
07-14 1139
交互反馈：API：wx.showToast,wx.showModal,wx.showActionSheet
微信小程序-收藏功能
热门推荐
qq_36901488的博客
09-05 2万+
给detail.wxml中的收藏图标添加属性: catchtap是点击事件,wx:if的用法如下: detail.js data: { detailObj:{}, index:null, // 是否收藏 isCollected:false }, handleCollection(){ let isCollected = !this.d...
微信小程序 收藏功能实现
qq_37902065的博客
03-27 1万+
小程序收藏功能的实现
weixin_33750452的博客
06-11 7389
需求 点击收藏后显示已收藏，在另一个页面出现目前点击收藏的项目 需要解决的问题 点击收藏后需要显示已收藏，并且文字状态改变 另一个页面如何知道你点击了收藏，并且获得你点击收藏的数据 如何解决？ 数据状态绑定，并且由状态控制样式（三元运算符） 缓存（setStorageSync,getStorageSync）,点击页面设置缓存（数...
微信小程序之收藏
weixin_43769819的博客
03-01 716
@[微信小程序之收藏) https://blog.csdn.net/zuoliangzhu/article/details/53862576 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功...
微信小程序开发--记事本 收藏夹
Linux痞子
01-21 2049
记事本微信小程序开发 这里是简单的微信小程序的开发主要实现的功能是记事本和收藏夹 1、开发环境的搭建 2、功能模块的介绍 3、代码实现
微信小程序—收藏功能
吕小布布布的博客
04-29 3680
wxml代码如下: <image src="{{isFavorite=='false'?'/images/menu/collect.png':'/images/menu/uncollect.png'}}" class='collect' bindtap='collect'></image><span class="num font_s30 font_c32">...
Springboot微信小程序收藏功能代码
04-07
可以回答这个问题。以下是一个简单的实现收藏功能的 Spring Boot 微信小程序代码示例： 1. 创建一个收藏实体类 ```java @Entity @Table(name = "collection") public class Collection { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private Long userId; private Long articleId; public Collection() { } public Collection(Long userId, Long articleId) { this.userId = userId; this.articleId = articleId; } // getters and setters } ``` 2. 创建一个收藏服务类 ```java @Service public class CollectionService { @Autowired private CollectionRepository collectionRepository; public boolean isCollected(Long userId, Long articleId) { Collection collection = collectionRepository.findByUserIdAndArticleId(userId, articleId); return collection != null; } public void collect(Long userId, Long articleId) { if (!isCollected(userId, articleId)) { Collection collection = new Collection(userId, articleId); collectionRepository.save(collection); } } public void cancelCollect(Long userId, Long articleId) { Collection collection = collectionRepository.findByUserIdAndArticleId(userId, articleId); if (collection != null) { collectionRepository.delete(collection); } } } ``` 3. 创建一个收藏控制器类 ```java @RestController @RequestMapping("/api/collection") public class CollectionController { @Autowired private CollectionService collectionService; @PostMapping("/collect") public void collect(@RequestParam("userId") Long userId, @RequestParam("articleId") Long articleId) { collectionService.collect(userId, articleId); } @PostMapping("/cancelCollect") public void cancelCollect(@RequestParam("userId") Long userId, @RequestParam("articleId") Long articleId) { collectionService.cancelCollect(userId, articleId); } @GetMapping("/isCollected") public boolean isCollected(@RequestParam("userId") Long userId, @RequestParam("articleId") Long articleId) { return collectionService.isCollected(userId, articleId); } } ``` 以上代码仅供参考，实际应用时需要根据具体需求进行修改和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值