1.简介
点赞，收藏等都是程序的最简单的功能，在现实的应用中也很常见。这里我就来给大家介绍一下小程序的这个功能。
图标下载地址
先去网站上https://www.iconfont.cn，下载收藏图标（已收藏图，未收藏图）
先去网站上https://www.iconfont.cn，下载点赞图标（已点赞图，未点赞图）
2.收藏图标
2-1.在app.json页面添加图标页面
"pages": [ "pages/tubiao/tubiao",
2-2.编写tubiao.js文件
// pages/tubiao/tubiao.js let chang = false Page({ data: { shouchangUrl: "../../imgs/chang-no.png " }, //收藏 clickMe1(){ if (chang){ //未收藏 this.setData({ shouchangUrl: "../../imgs/chang-no.png" }) chang = false }else{ //已收藏 this.setData({ shouchangUrl:"../../imgs/chang-yes.png" }) chang = true }
2-3.编写tubiao.wxml文件
<!--pages/tubiao/tubiao.wxml--> <text>pages/tubiao/tubiao.wxml</text> <view> <image class = "image" src = "{{shouchangUrl}}" bindtap="clickMe1"></image> </view>
2-4.编写tubiao.wxss文件
/* pages/tubiao/tubiao.wxss */ .image{ width: 120rpx; height: 120rpx; }
2-5.效果图（视频）
收藏
3.点赞图标
3-1.编写tubiao.js文件
let zan = false Page({ data: { dianzanUrl: "../../imgs/zan-no.png", }, //点赞 clickMe2(){ if (zan){ //未点赞 this.setData({ dianzanUrl: "../../imgs/zan-no.png" }) zan = false }else{ //已点赞 this.setData({ dianzanUrl:"../../imgs/zan-yes.png" }) zan = true } }, })
3-2.编写tubiao.wxml文件
<!--pages/tubiao/tubiao.wxml--> <view> <image class = "image" src = "{{dianzanUrl}}" bindtap="clickMe2"></image> </view>
3-3.编写tubiao.wxss文件
.image{ width: 120rpx; height: 120rpx; }
3-4.效果图（视频）
微信小程序-点赞
4.功能（代码）优化
运用三目运算符实现代码的优化
4-1.优化tubiao.js文件
// pages/tubiao/tubiao.js let chang = false let zan = false Page({ data: { shouchangUrl: "../../imgs/chang-no.png ", dianzanUrl: "../../imgs/zan-no.png", }, //收藏（三目运算符） clickMe1(){ this.setData({ shouchangUrl:chang?"../../imgs/chang-no.png":"../../imgs/chang-yes.png" }) chang = !chang //取反（收藏与未收藏之间的切换） }, //收藏（三目运算符） clickMe2(){ this.setData({ dianzanUrl:zan?"../../imgs/zan-no.png":"../../imgs/zan-yes.png" }) zan = !zan //取反（点赞与未点赞之间的切换） }, })
4-2.优化tubiao.wxml文件
<!--pages/tubiao/tubiao.wxml--> <view> <image class = "image" src = "{{shouchangUrl}}" bindtap="clickMe1"></image> <image class = "image" src = "{{dianzanUrl}}" bindtap="clickMe2"></image> </view>
4-3.优化tubiao.wxss文件
/* pages/tubiao/tubiao.wxss */ .image{ width: 120rpx; height: 120rpx; }
4-4.效果图（视频）
微信小程序-点赞收藏
云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）
感谢大家，点赞，收藏，关注，评论！
