AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【微信小程序】收藏功能的实现(条件渲染、交互反馈)

2023-04-21 500
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： wxml页面部分比较简单，添加一个view容器，命名为tool。然后添加三个小view，分别表示点赞、评论、收藏。每个小view中包括图片和数量，即image和text标签。每个功能按钮都绑定了对应的点击事件，即catchtap属性。除此之外，每个功能按钮绑定当前文章的id号。

9476747fb7384771b22f93bd3383f0ed.gif


🏆今日学习目标：第十九期——收藏功能的实现(条件渲染、交互反馈)

😃创作者：颜颜yan_

✨个人主页：颜颜yan_的个人主页

⏰预计时间：35分钟

🎉专栏系列：我的第一个微信小程序


前言


哈喽大家好，本期是微信小程序专栏第十九期。本期主要内容收藏功能的实现(条件渲染、交互反馈)。


每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~


前期准备


这一部分包括页面数据data.js和页面的结构。data.js放在文章末尾了噢~


wxml


wxml页面部分比较简单，添加一个view容器，命名为tool。然后添加三个小view，分别表示点赞、评论、收藏。每个小view中包括图片和数量，即image和text标签。每个功能按钮都绑定了对应的点击事件，即catchtap属性。除此之外，每个功能按钮绑定当前文章的id号。


<!-- 收藏、评论、点赞、计数等功能 -->
<view class="tool">
<!-- 点赞 -->
    <view class="tool-item" catchtap="onUpTap" data-post-id="{{post.postId}}">
    <image src="/images/icon/wx_app_like.png"></image>
    <text>{{post.upNum}}</text>
    </view>
    <!-- 评论 -->
    <view class="tool-item comment" catchtap="onCommentTap" data-post-id="{{post.postId}}">
    <image src="/images/icon/wx_app_message.png"></image>
    <text>{{post.commentNum}}</text>
    </view>
    <!-- 收藏 -->
    <view class="tool-item" catchtap="onCollectionTap" data-post-id="{{post.postId}}">
    <image src="/images/icon/wx_app_collect.png"></image>
    <text>{{post.collectionNum}}</text>
    </view>
</view>


wxss


添加wxss后，保存代码，效果图如下：


3ccb0e458837492682b4faba7ade86c3.png


.tool{
    height: 65rpx;
    text-align: center;
    line-height: 65rpx;
    margin: 20rpx 28rpx 20rpx 0;
}
.tool-item{
    display: inline-block;
    vertical-align: top;
    margin-right: 30rpx;
}
.tool-item image{
    height: 30rpx;
    width: 30rpx;
    vertical-align: -3px;
    margin-right: 10rpx;
}


文章收藏功能


条件渲染（wx:if与wx:else）


wx:if与wx:else可以实现条件渲染。当变量为true时，执行wx:if，否则将执行wx:else。这个思路类似于js中的if else。


wx:if可以被单独使用，并不一定要和wx:else一起使用


接下来，我们用一个小例子来理解wx:if和wx:else。如果变量length的取值大于4，则显示数字1，否则显示数字0。


<view wx:if="{{length>4}}">1</view>
<view wx:else>0</view>


条件渲染也可以实现多级的if else。如下，如果变量length的取值大于4，则显示数字0；如果变量length的取值大于1且小于等于4，则显示数字1，否则显示数字2。


<view wx:if="{{length>4}}">0</view>
<view wx:elif="{{length>1}}">1</view>
<view wx:else>2</view>


收藏图标切换


思路： 判断自己是否收藏了文章。如果自己收藏了，就需要将收藏的图标更换为已收藏的图标。


在data.js中，我们使用collectionStatus属性表示文章是否被收藏，这个变量的类型时布尔类型。当collectionStatus为ture时，显示已收藏图标，否则显示未收藏图标。如下，使用条件渲染就可以很轻松地实现啦~


74d15451dfcb4eeb942590b5821337f7.png

c8415f5a46b545989a3fb39a0f49c9e8.png


wx:if与wx:else的条件渲染不仅仅可以用来做图片的更换，还可以用控制元素与的显示和隐藏


收藏点击功能


实现当用户点击收藏图标时，对文章进行收藏和取消收藏。


首先在数据库操作类方法中添加updatePostData方法，用来更新本地的点赞等信息。


思路：


1.定义变量获取当前文章的id和所有文章的id。


2.使用swich case处理收藏。使用if else进行判断，如果当前状态是未收藏，则将收藏总量增加，collectionStatus设置为true；如果当前状态是收藏，则将收藏总量减少，collectionStatus设置为false。注意：swich是选择语句，不是循环语句，这里的break用来跳出swich。也可以使用if，但如果后续添加其他功能，使用嵌套的if语句层数多，导致程序冗长，可读性下降。所以面对多分支选择，使用swich更好。


3.更新缓存数据库。使用同步接口来更新数据库，即execSetStorageSync。


4.添加collect()方法调用updatePostData方法。


5.编写处理文章收藏动作的事件函数onCollectionTap，首先在wxml中进行注册，然后编写js方法。


 //DBPost.js
 // 收藏文章
    collect(){
        return this.updatePostData('collect');
    }
    // 更新本地的点赞、评论信息、收藏、阅读量
    updatePostData(category){
        var itemData = this.getPostItemById(),
        postData = itemData.data,
        allPostData = this.getAllPostData();
        switch(category){
            case 'collect':
                // 处理收藏，如果当前状态是未收藏，则增加数量，否则减少数量。
                if(!postData.collectionStatus){
                    // 当前状态是未收藏
                    postData.collectionNum++;
                    postData.collectionStatus = true;
                }else{
                    // 当前状态是收藏
                    postData.collectionNum--;
                    postData.collectionStatus = false; 
                }
                break;
            default:
                break;
        }
        // 更新缓存数据库
        allPostData[itemData.index] = postData;
        this.execSetStorageSync(allPostData);
        return postData;
    }


cba1eb941297438b95b601dda349611b.png

a297f71e03bb4982bf3e85e47bddf5b3.png


效果图如下：


ed2154285f124c04a25a251802b70182.png


交互反馈（wx:showToast）


现在，我们已经实现了文章的收藏与取消功能，但用户在收藏和取消收藏后没有任何交互反馈提示。


小程序提供了四种交互反馈API：


  • wx.showToast
  • wx.hideToast
  • wx.showModal
  • wx.showActionSheet


接下来，我们使用wx:showToast(object)来制作文章收藏功能的交互反馈。如下：


  1. 使用title属性设置提醒消息的内容；
  2. 使用duration设置提醒的自动消失时间，默认值是1500毫秒；
  3. 使用icon设置一个小图标，取值只能是success和loading；
  4. 使用mask指定是否显示透明的蒙层，防止触摸穿透，默认值是false。


b4bd26e9e17b464abd1e05ce740f42cf.png


效果图如下：


e5f97e5ba9c34ca4b5807818ae3ea0b9.png


data.js


var postList = [{
    date:"Nov 9 2022",
    title:"那个不为人知的故事",
    postImg:"/images/post/unknow-story.jpg",
    avatar:"/images/avatar/avatar-5.png",
    content:"超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软。这是杨昭和陈铭生的故事，这是卧底缉毒警察的故事。 你始终不曾离去，你永远在我心底。",
    readingNum:10989,
    collectionNum:1867,
    commentNum:999,
    author:"无量渡口",
    dateTime:"2020年10月",
    detail:"杨昭是一名古董修复师，过着奢侈却封闭的生活。陈铭生是卧底缉毒警察，在一次任务中失去了一条腿后，隐姓埋名来到杨昭所在的城市做了出租车司机。意外的相遇让两个“不般配”的人走到了一起，他们的感情没有杂质，不在乎任何世俗标准、社会地位甚至身体残缺，只有纯粹的彼此。他们不畏世俗的眼光，以为会勇敢而安然地共度下半辈子，直到陈铭生接到新的任务。在陈铭生接到新的任务之后，他们的生活发生了变化。",
    postId:1,
    music:{
        url:"https://music.163.com/#/song?id=2001297075&market=baiduqk",
        title:"那个不为人知的故事",
        coverImg:"https://p2.music.126.net/BjNwhCRpsb3sd_FPqSkpyQ==/109951167550604611.jpg?param=130y130"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 10 2022",
    title:"边城",
    postImg:"/images/post/biancheng.jpg",
    avatar:"/images/avatar/avatar-2.png",
    content:"沈从文代表作之一，重现湘西世界的诗意与纯净，书写人情美、人事美、人性美",
    readingNum:9999,
    collectionNum:8766,
    commentNum:886,
    author:"沈从文",
    dateTime:"1934年4月",
    detail:"《边城》成书于1934年4月，那正是沈从文爱情事业双丰收的季节。1931年社会虽然动荡不安，但总体上还是稍显和平，这个时候中国有良知的文人，都在思考着人性的本质，沈从文自然是走在前沿的，于是，他希望通过自己对湘西的印象，描写了一个近似于桃花源的湘西小城，给都市文明中迷茫的人性指一条明路。人间尚有纯洁自然的爱，人生需要皈依自然的本性。",
    postId:2,
    music:{
        url:"https://music.163.com/#/song?id=1383022165",
        title:"等等等等",
        coverImg:"https://p2.music.126.net/UVppy_qTp0HM4WRFP9cxcw==/109951164277036447.jpg?param=130y130"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 11 2022",
    title:"活着",
    postImg:"/images/post/alive.jpg",
    avatar:"/images/avatar/avatar-3.png",
    content:"《活着》讲述了人如何去承受巨大的苦难；讲述了眼泪的宽广和丰富；讲述了绝望的不存在；讲述了人是为了活着本身而活着的，而不是为了活着之外的任何事物而活着。",
    readingNum:1234,
    collectionNum:5676,
    commentNum:890,
    author:"余华",
    dateTime:"1992年12月",
    detail:"《活着》是当代作家余华的代表作，讲述了一个人历尽世间沧桑和磨难的一生，亦将中国大半个世纪的社会变迁凝缩其间。《活着》还讲述了眼泪的宽广和丰富；讲述了绝望的不存在；讲述了人是为了活着本身而活着的，而不是为了活着之外的任何事物而活着。《活着》出版25年来打动了无数读者，经过时间的沉淀，已成为20世纪中国文学当之无愧的经典之作。到今天，已被译介至英、法、德、意、日、韩、俄等30多个国家和地区，获得国内外多个文学大奖，余华也凭借这部作品于2004年获得法兰西艺术和骑士文化勋章。",
    postId:3,
    music:{
        url:"https://music.163.com/#/song?id=1438059520&market=baiduqk",
        title:"To Live",
        coverImg:"https://p1.music.126.net/nnvavnnYB81exIMtpvAyRQ==/109951164876062278.jpg?param=130y130"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 12 2022",
    title:"哈利波特百科全书",
    postImg:"/images/post/harry.jpg",
    avatar:"/images/avatar/avatar-4.png",
    content:"手里没有哈利波特百科全书 ，怎么能称得上真正的哈迷！涵盖哈利·波特全系列内容，配全新精美素描插图、哈利波特魔法世界历史年表。",
    readingNum:789,
    collectionNum:906,
    commentNum:345,
    author:"哈利·波特百科全书编委会",
    dateTime:"2007年10月",
    detail:"本书全面展示、生动再现了JK罗琳建构的魔法世界。书中对所有词条均有全面、生动、详细的解读。对于巫师的出身、经历、性格、姓名的由来以及该人物与希腊神话、罗马神话、圣经故事的隐密关联等，都有详细的解释；对于怪异难懂的魔法、咒语、绰号、俗语等，都从拉丁语、英语、法语、德语等语源的角度做出了合理的阐释。这是本书的核心部分，是“哈迷”全面了解魔法世界、深度阅读小说，以及进行相关研究的重要参考书。",
    postId:4,
    music:{
        url:"https://music.163.com/#/song?id=1350064264&market=baiduqk",
        title:"Harry Potter Theme",
        coverImg:"https://img1.kuwo.cn/star/albumcover/500/26/29/2268976275.jpg"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 19 2022",
    title:"三体：全三册",
    postImg:"/images/post/santi.jpg",
    avatar:"/images/avatar/avatar-5.png",
    content:"《三体》第73届世界科幻雨果奖获奖作品，银河奖特别奖，《三体3》轨迹奖长篇科幻小说！2017年世界雨果奖提名作品。",
    readingNum:99,
    collectionNum:8766,
    commentNum:89,
    author:"刘慈欣",
    dateTime:"2006年5月",
    detail:"《三体》是刘慈欣创作的长篇科幻小说系列，由《三体》《三体2：黑暗森林》《三体3：死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。",
    postId:5,
    music:{
        url:"https://y.qq.com/n/ryqq/player",
        title:"三体-黑暗森林",
        coverImg:"https://y.qq.com/music/photo_new/T002R300x300M000004KqWDO3A8LDU_1.jpg?max_age=2592000"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
}
]
// 添加接口，向外部暴露模块
module.exports = {
    postList: postList
}


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏，持续更新呢~

咱们下期再见~


7a7f1ab5866b4f67b4ef17d6958f3648.gif

文章标签：
JavaScript
容器
API
数据库
缓存
小程序
关键词：
微信功能
微信小程序功能
微信渲染
微信小程序渲染
微信交互
yanyan0918-20704
目录
相关文章
chnjames
|
14天前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器：简繁体切换功能完全指南
随着全球化的发展，支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能，以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数，开发者可以方便地实现语言切换，从而提升用户体验。文章中还附带了示例代码和效果图，帮助读者更好地理解和应用这一功能。
chnjames
62 0
微信小程序多语言切换神器：简繁体切换功能完全指南
bruce_xiaowei
|
27天前
|
小程序 Linux Python
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
bruce_xiaowei
17 1
杀死一只知更鸟debug
|
2月前
|
JSON 小程序 前端开发
towxml的使用，在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
杀死一只知更鸟debug
71 2
周一同学Zelina
|
2月前
|
算法 JavaScript 前端开发
切西瓜法实现微信抢红包功能
该文章介绍了使用“切西瓜法”和“栅栏法”两种算法来模拟微信抢红包的随机分配机制，并通过具体的JavaScript代码实现了红包金额的公平随机分配过程。
周一同学Zelina
20 0
切西瓜法实现微信抢红包功能
杀死一只知更鸟debug
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法，包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
杀死一只知更鸟debug
116 0
微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明
阿里云云原生
|
2月前
|
人工智能 前端开发 JavaScript
MacTalk 测评通义灵码，实现“微信表情”小功能
墨问西东创始人池建强分享了团队使用通义灵码的经验。
阿里云云原生
83 6
小周sir
|
2月前
|
小程序 API 开发工具
使用python 实现微信签到提醒功能
【9月更文挑战第4天】使用python 实现微信签到提醒功能
小周sir
63 2
路边两盏灯
|
3月前
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
路边两盏灯
40 1
游客zi3qmblbcdexu
|
3月前
|
小程序 前端开发 开发者
微信小程序实现分享朋友圈功能
【8月更文挑战第21天】
游客zi3qmblbcdexu
106 1
番茄酱脑袋
|
3月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中，由于不支持slot特性，Ant Design Mini的什么组件功能受到了限制，如何解决
Ant Design Mini 问题之在微信小程序中，由于不支持slot特性，Ant Design Mini的什么组件功能受到了限制，如何解决
番茄酱脑袋
89 1

热门文章

最新文章

  • 1
    Python 微信机器人：调用电脑摄像头时时监控功能实现演示，调用电脑摄像头进行拍照并保存
  • 2
    【Android 控件使用及源码解析】 GridView规则显示图片仿微信朋友圈发图片
  • 3
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 4
    iOS版微信新技能：可直接向PC端传文件
  • 5
    微信语音在网页端播放
  • 6
    微信查询高考分数已支持20个城市
  • 7
    微信公众平台可通过UnionID机制在多公众号间帐号互通
  • 8
    微信消息回复C#
  • 9
    微信快速开发框架（二） -- 快速开发微信公众平台框架---简介
  • 10
    微信公众平台开发接口PHP SDK完整版
  • 1
    微信小程序如何在切换页面后原页面状态不变
    322
  • 2
    微信小程序如何刷新当前页面
    633
  • 3
    微信小程序——解决异步问题
    306
  • 4
    微信小程序——属性配置大全
    109
  • 5
    mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
    95
  • 6
    在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
    346
  • 7
    微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
    1038
  • 8
    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
    823
  • 9
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
    655
  • 10
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    162

    • 相关课程

    更多
  • IoT小程序框架课程
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 网站性能前端监控课程

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 如何快速体验知识检索增强应用
  • 快速搭建移动端可视化看板
  • 快速体验智能体API应用
  • 1分钟SAE部署PHP商城小程序
  • 通过云拨测对指定网页进行网页性能监测
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月