微信⼩程序开发⼊门第七章：收藏、评论、点赞及计数功能 本章内容有⼀定的难度，但其中的技巧和知识还是很丰富的。本章通过编写⼏乎所有内容型应⽤都会附带的“评论”“点赞”“阅读计数”“收藏”等功能，来学习使⽤⼩程序的交互反馈组件、缓存的应⽤、图⽚选择和预览、屏蔽关键字、录⾳、拍照以及播放录⾳等功能7.1 收藏、评论、点赞、计数功能准备⼯作
7.1 收藏、评论、点赞、计数功能准备⼯作
接下来我们将要连续实现4个⾮常有意思的功能，这些功能在内容型应⽤中是⾮常常见的，分别是收藏、点赞、评论和计数。
我们先来编写收藏、评论和点赞的功能按钮。阅读计数是⼀项被动功能，⽆须⽤户有意识地主动触发。在post-detail.wxml中新增⼀段⼯具栏代码。
代码清单 7-1 编写3个功能的功能按钮 post-detail.wxml
1<!--pages/post/post-detail/post-detail.wxml-->
2<view class="container">
3 <image class="head-image" src="{{post.postImg}}"></image>
4 <text class="title">{{post.title}}</text>
5 <view class="author-date">
6 <view class="author-box">
微信红包玩法
7 <image class="avatar" src="{{post.avatar}}"></image>
8 <text class="author">{{post.author}}</text>
9 </view>
10 <text class="date">{{post.dataTime}}</text>
11 </view>
12 <text class="detail">{{post.detail}}</text>
13</view>
14
15<view class="tool">
16 <view class="tool-item" catchtap='onUpTop' data-post-id="{{post.postId}}">
17 <image src="/images/icon/wx_app_like.png"></image>
18 <text>{{post.upNum}}</text>
19 </view>
20 <view class="tool-item comment" catchtap='onCommentTap' data-post-id="{{post.postId}}">
21 <image src="/images/icon/wx_app_message.png"></image>
22 <text>{{tNum}}</text>
23 </view>
24 <view class="tool-item" catchtap='onCollectionTap' data-post-id="{{post.postId}}">
25 <image src="/images/icon/wx_app_collected.png"></image>
26 <text>{{post.upNum}}</text>
27 </view>
28</view>
在post-detail.wxml页⾯的中添加了⼀段<view class="tool">的相关代码。该代码实现了收藏、评论和点赞3个功能按钮。每个功能按钮都绑定了对应的点击事件，注意view组件上的catchtap属性。除此之外，我们还在每个功能按钮上使⽤data-post-id绑定了当前⽂章的id号。
upNum、commentNum和collectionNum等数据已经在5.13⼩节中全部添加到了data.js⽂件中。
接着编写3个功能按钮的样式
红菜苔
代码清单 7-2 编写3个功能按钮的样式 post-detail.wxss
2 height: 64rpx;
3 text-align: center;
4 line-height: 64rpx;
5 margin: 20rpx 28rpx 20rpx 0;
6}
8 display: inline-block;
9 vertical-align: top;
10 margin-right: 30rpx;
朦昧11}
13 height: 30rpx;
14 width: 30rpx;
15 vertical-align: -3px;
16 margin-right: 10rpx;
17}
19 transform: scale(.85);
20}
保存刷新后，3个功能按钮将出现在post-detail页⾯的正下⽅，如图7-1所⽰。
图7-1 3个功能按钮的样式和位置
7.2 ⽂章收藏功能
7.2 ⽂章收藏功能
我们⾸先来实现⽂章收藏功能。⽂章收藏功能需要记录两个变量值：
⾃⼰是否收藏了⽂章。如果⾃⼰收藏了，那么需要将收藏的图⽚更换为已收藏。
所有⽤户收藏⽂章的总数量。需要注意的是，由于我们的数据库只在本地，⽆法多次收藏同⼀篇⽂章，所以收藏数量永远只能在初始数量的基础上+1或者-1，分别对应取消收藏和点击收藏两种状态。但在真实的项⽬中，这个收藏数量却是要受到所有⽤户取消、收藏⽂章动作影响的。同样的情况也会出现在“⽂章点赞”这个功能⾥。
当页⾯从post跳转到post-detail时，我们就需要知道该⽂章是否已被⽤户收藏。在data.js中，我们使⽤collectionStatus这个属性表⽰⽂章是否已被收藏，这个变量的类型是Boolean。那么如何根据collectionStatus这个变量的取值来动态切换收藏图标呢？
熟悉传统Web开发的读者很容易想到⽤jQuery获取image标签，再动态地设置image的src属性。再次强调，⼩程序没有dom，⼀切都是数据绑定，请抛弃dom的思维⽅式。
7.2.1 条件渲染：wx:if与wx:el
collectionStatus只有两种取值：true或者fal。我们需要做的是，当collectionStatus为fal时，显⽰图7-2未收藏状态的图标，⽽当collectionStatus为true时，显⽰图7-3收藏状态的图标。
以上需求是不是就是编程中⾮常经典的if el？如果wxml组件也像js代码⼀样有if el就可以解决动态显⽰收藏图⽚的问题。下⾯来看看如何实现这个功能。
⼩程序提供了wx:if与wx:el来实现条件渲染。当变量为true时，执⾏wx:if，否则将执⾏wx:el。修改收藏按钮的wxml代码如下：
代码清单 7-3 条件渲染 post-detail.wxml
1 <view class="tool-item" catchtap='onCollectionTap' data-post-id="{{post.postId}}">
2 <image wx:if="{{llectionStatus}}" src="/images/icon/wx_app_collected.png"></image>
3 <image wx:el src="/images/icon/wx_app_collect.png"></image>
4 <text>{{llectionNum}}</text>
5 </view>
上述代码中我们添加了两个image组件，分别是收藏和未收藏图⽚。这两个image组件各有⼀个wx：if和wx：el属性。当
由于我们已经在data.js⽂件中将部分⽂章的收藏状态设置为true，因此保存并运⾏项⽬，发现所有collectionStatus为true的⽂章，其收藏图⽚都将显⽰wx_app_collected.png，如图7-4所⽰。
图7-4 显⽰wx_app_collected.png
wx:if与wx:el的条件渲染在⼩程序中被⼤量使⽤，不仅仅被⽤来做图⽚的更换，还可以⽤来控制元素的显⽰和隐藏。
wx:if可以被单独使⽤，并不⼀定要同wx:el⼀起使⽤。
除此之外，条件渲染还可以做多级别的if el，如代码清单7-4的⽰例代码所⽰。
如果变量length的取值⼤于5，那么将显⽰数字1。
如果变量length的取值⼤于2且⼩于等于5，那么将显⽰数字2。
以上条件都不满⾜，就显⽰数字3。
你还可以添加更多的elif分⽀，以实现更多级别的条件判断。
7.2.2 实现收藏点击功能
在7.2.1⼩节中，我们仅仅是在post-detail页⾯加载时读取了该⽂章对于当前⽤户是否为收藏状态，并正确地设置和显⽰了这个状态。
在这个⼩节中，我们将实现⽤户点击图⽚进⾏⽂章的收藏和取消收藏功能。⾸先我们继续完善DBPost这个数据库操作类。在DBPost类中添加⼀个⽅法，⽤以处理⽂章的收藏操作。
代码清单 7-5 添加处理⽂章收藏的⽅法 DBPost.js
1//收藏⽂章
2collect()
3{
4 return this.updatePostData('collect');
5}
该⽅法中调⽤了DBPost类的updatePostData⽅法，这个⽅法我们还没有编写。
音体美在DBPost类中添加updatePostData⽅法。该⽅法是处理点赞、评论、收藏、阅读的核⼼⽅法。
代码清单 7-6 添加updatePostData⽅法 DBPost.js
1//更新本地的点赞、评论信息、收藏、阅读量
2updatePostData(category){
3 var itemData = PostItemById(),
4 postData = itemData.data,
5 allPostData = AllPostData();
6 switch(category){
7 ca 'collect':
8 //处理收藏
9 if(!llectionStatus){
10 //如果当前状态是未收藏
11 llectionNum++;
12 llectionStatus = true;
13 }el{
14 //如果当前状态是已收藏
15 llectionNum--;
16 llectionStatus = fal;
17 }
18 break;
19 default:break;
孔子家语20 }
21 //更新缓存数据库
22 allPostData[itemData.index] = postData;
23 SetStorageSync(allPostData);
24 return postData;
25}
我们⽬前仅处理collect这⼀种操作，后续我们将继续在代码清单7-6的switch ca中添加评论、阅读数、点赞等处理分⽀。
寒假生活感悟
这样，DBPost就具备了处理⽂章收藏的能⼒。当⽤户点击收藏按钮后，在点击事件函数中调⽤DBPost的collect⽅法即可。
处理⽂章收藏动作的事件函数是onCollectionTap，这个事件函数已在代码清单7-1中被注册在了收藏功能按钮上。我们只需要在post-detail.js中编写这个⽅法即可
代码清单 7-7编写onCollectionTap⽅法 post-detail.js
7.2.3 交互反馈wx:showToast
现在，我们已经实现了⽂章的收藏与取消收藏功能，但收藏功能的体验并不好，⽤户在收藏和取消收藏后没有任何交互反馈提⽰。⼩程序提供了⼀些交互反馈API来帮助开发者处理交互相关的问题。⽬前，⼩程序提供了以下4个交互反馈API：wx.showToast wx.hideToast wx.showModal
wx.showActionSheet
我们选⽤wx.showToast(object)来制作⽂章收藏功能的交互反馈。
代码清单 7-8 ⽂章收藏功能的交互反馈 post-detail.js
小孩拉肚子怎么办其中，object参数的title属性⽤于设置提醒消息的内容；duration设置提醒的⾃动消失时间，最长10000毫秒，默认值为1500毫秒；icon 可以设置⼀个⼩图标，其取值只能是success和loading；mask指定是否显⽰透明的蒙层，以防⽌触摸穿透，默认值为fal。
mask主要⽤来防⽌⽤户连续点击收藏按钮。开发者可执⾏尝试将mask设置为true和fal时的不同效果：当mask为true时连续点击收藏图标，图标不会连续做出收藏/取消收藏的响应；当mask为fal时，就会不停地响应⽤户的点击操作。
wx.showToast的效果如图7-5所⽰。
图7-5 wx.showToast效果
7.3 ⽂章点赞功能
7.3 ⽂章点赞功能1
nCollectionTap:function(event){2
//dbpost 对象已在onLoad 函数中被保存到了this 变量中，⽆需再次实例化3
var newData = llect();4
//从新绑定数据，注意，不要将整个newData 全部作为tData 的参数，应当有选择的更新部分数据5
this.tData(6
{7
'llectionSataus':llectionStatus,8
'llectionNum':llectionNum 9
}10 ) 11}
1
//交互反馈2
wx.showToast({3
llectionStatus?"收藏成功":"收藏取消",4
梦想造句duration:1000,5
icon:"sucess",6 make:true 7 })
