1、收藏、评论、点赞、计数功能准备工作
编写收藏、评论、点赞的功能按钮。计数功能是一个被动功能，无须用户有意识的主动触发。
1.1 编写3个功能的功能按钮
post-detail.wxml
<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>
1.2 编写3个功能的功能样式
post-detail.wxss
.tool{
height: 64rpx;
text-align: center;
line-height: 64rpx;
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;
}
.comment image{
transform: scale(0.85);
}
image.png
- 属性注意点
1）transform: scale（）属性
image.png
image.png
2）display: inline-block;属性
image.png
image.png
2、文章收藏功能
文章收藏功能需要记录两个变量值：
1）根据是否已经收藏更换照片、
2）收藏数量的变化
2.1 条件渲染：wx:if 与 wx:else
小程序提供了wx:if 与 wx:else来实现条件渲染。当变量为true时，执行wx:if，否则将执行wx:else
2.1.1 条件渲染：wx:if 与 wx:else
post-detail.wxml
<view class='tool-item' catchtap='onCollectionTap' data-post-id="{{post.postId}}">
<image wx:if="{{post.collectionStatus}}" src='/images/icon/wx_app_collected.png'></image>
<image wx:else src='/images/icon/wx_app_collected.png'></image>
<text>{{post.collectionNum}}</text>
</view>
image.png
2.1.2 多级别 if else
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>
2.2 实现收藏点击功能
2.2.1 添加处理文章收藏的方法
首先完善数据库工具类的操作
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;
}
2.2.2 编写onCollectionTap方法
首先完善数据库工具类的操作
post-detail.js
onCollectionTap:function(event){
var newData = this.dbPost.collect();
//重新绑定数据
//应该选择更新部分数据
this.setData({
'post.collectionStatus':newData.collectionStatus,
'post.collectionNum': newData.collectionNum
});
}
2.3 交互反馈wx:showToast
小程序提供了一些交互反馈API来帮助开发者处理交互相关的问题，目前主要有如下几个：
image.png
2.3.1 文章收藏功能的交互反馈
post-detail.js
wx.showToast({
title: newData.collectionStatus? '收藏成功':'取消成功',
duration:1000,
icon:'success',
mask:true
})
-参数说明
image.png
image.png
2.3 文章点赞功能
这个功能跟之前文章收藏功能基本写法是一样的
2.3.1 添加处理点赞操作的方法
DBPost.js
//点赞或者取消点赞
up() {
var data = this.updatePostData('up');
return data;
}
//更新本地的点赞、评论信息、收藏、阅读量
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;
case 'up':
if (!postData.upStatus) {
postData.upNum++;
postData.upStatus = true;
} else {
postData.upNum--;
postData.upStatus = false;
}
break;
default:
break;
}
//更新缓存数据库
allPostData[itemData.index] = postData;
this.execSetStorageSync(allPostData);
return postData;
}
2.3.2 编写onUpTap方法
post-detail.js
onUpTap: function (event){
var newData = this.dbPost.up();
this.setData({
'post.upStatus': newData.upStatus,
'post.upNum': newData.upNum
});
wx.showToast({
title: newData.collectionStatus ? '点赞成功' : '取消成功',
duration: 1000,
icon: 'success',
mask: false
})
},
2.3.3 点赞功能的条件渲染
post-detail.wxml
<view class='tool'>
<view class='tool-item' catchtap='onUpTap' data-post-id="{{post.postId}}">
<image wx:if="{{post.upStatus}}" src='/images/icon/wx_app_liked.png'></image>
<image wx:else src='/images/icon/wx_app_like.png'></image>
<text>{{post.upNum}}</text>
</view>
image.png
2.4 本地缓存的重要性及应用举例
提供本地的key&value缓存机制是小程序的一大特点，善用本地缓存可以极大地改善客户端的体验与服务器的性能。
在一个高性能的产品中，缓存的重要性是不言而喻的，建议开发者将本地缓存视作为一个本地的key&value数据库，并封装一些类和公用方法，提供给项目中的各个调用方，最好不要让getStorage 、setStorage等方法充斥在项目的每一个角落
2.5 支持文字、图片、拍照、语音上传的文章评论
2.5.1 注册post-comment页面
app.json
image.png
2.5.2 onCommentTap方法
post-detail.js
onCommentTap: function (event){
var id = event.currentTarget.dataset.postId;
wx.navigateTo({
url: '../post-comment/post-comment?id='+id
})
},
2.6 文章评论页面的实现步骤与思路
2.6.1 思路
1）加载并显示当前文章已存在的评论
2）添加新评论的功能
2.6.2 步骤
1）在post-comment.js中获取并绑定文章评论数据
2）在post-comment 页面的wxml和wcss显示文章评论数据
3）编写添加新评论的功能
2.7 获取并绑定文章评论数据
2.7.1 获取评论数据
post-comment.js
import{DBPost} from '../../../db/DBPost.js'
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var postId = options.id;
this.dbPost = new DBPost(postId);
var comments = this.dbPost.getCommentData();
console.log('comments==' + comments)
//绑定评论数据
this.setData({
comments:comments
})
},
})
2.7.2 编写获取文章评论的方法
DBPost.js
//编写获取文章评论的方法
getCommentData() {
var itemData = this.getPostItemById().data;
//按时间减序排列评论
itemData.comments.sort(this.compareWithTime);
var len = itemData.comments.length,
comment;
for (var i = 0; i < len; i++) {
comment = itemData.comments[i];
comment.create_time = util.getDiffTime(comment.create_time, true);
}
return itemData.comments;
}
2.7.3 compareWithTime方法
DBPost.js
compareWithTime(value1, value2) {
var flag = parseFloat(value1.create_time) - parseFloat(value2.create_time);
if (flag < 0) {
return 1;
} else if (flag > 0) {
return -1;
} else {
return 0;
}
}
2.7.4 getDiffTime方法
util.js
/*
*根据客户端的时间信息得到发表评论的时间格式
*多少分钟前，多少小时前，然后是昨天，然后再是月日
* Para :
* recordTime - {float} 时间戳
* yearsFlag -{bool} 是否要年份
*/
function getDiffTime(recordTime, yearsFlag) {
if (recordTime) {
recordTime = new Date(parseFloat(recordTime) * 1000);
var minute = 1000 * 60,
hour = minute * 60,
day = hour * 24,
now = new Date(),
diff = now - recordTime;
var result = '';
if (diff < 0) {
return result;
}
var weekR = diff / (7 * day);
var dayC = diff / day;
var hourC = diff / hour;
var minC = diff / minute;
if (weekR >= 1) {
var formate = 'MM-dd hh:mm';
if (yearsFlag) {
formate = 'yyyy-MM-dd hh:mm';
}
return recordTime.format(formate);
}
else if (dayC == 1 || (hourC < 24 && recordTime.getDate() != now.getDate())) {
result = '昨天' + recordTime.format('hh:mm');
return result;
}
else if (dayC > 1) {
var formate = 'MM-dd hh:mm';
if (yearsFlag) {
formate = 'yyyy-MM-dd hh:mm';
}
return recordTime.format(formate);
}
else if (hourC >= 1) {
result = parseInt(hourC) + '小时前';
return result;
}
else if (minC >= 1) {
result = parseInt(minC) + '分钟前';
return result;
} else {
result = '刚刚';
return result;
}
}
return '';
}
2.7.5 在Date原型链上新增format方法
util.js
/*
*拓展Date方法。得到格式化的日期形式
*date.format('yyyy-MM-dd')，date.format('yyyy/MM/dd'),date.format('yyyy.MM.dd')
*date.format('dd.MM.yy'), date.format('yyyy.dd.MM'), date.format('yyyy-MM-dd HH:mm')
*使用方法 如下：
* var date = new Date();
* var todayFormat = date.format('yyyy-MM-dd'); //结果为2015-2-3
*Parameters:
*format - {string} 目标格式 类似('yyyy-MM-dd')
*Returns - {string} 格式化后的日期 2015-2-3
*
*/
(function initTimeFormat() {
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
};
})()
2.7.6 添加module.exports
util.js
module.exports = {
getDiffTime: getDiffTime
}
2.7.7 引用util模块
DBPost.js
var util = require('../util/util.js')
image.png
2.8 显示文章评论数据
2.8.1 获取评论数据wxml代码
post-comment.wxml
<!--pages/post/post-comment/post-comment.wxml-->
<view class='comment-detail-box'>
<view classs='comment-main-box'>
<view class='comment-title'>评论......（共{{comments.length}}条）</view>
<block wx:for="{{comments}}" wx:for-item="item" wx:for-index="idx">
<view class='comment-item'>
<view class='comment-item-header'>
<view class='left-img'>
<image src='{{item.avatar}}'></image>
</view>
<view class='right-user'>
<text class='user-name'>{{item.username}}</text>
</view>
</view>
<view class='comment-body'>
<view class='comment-text' wx:if="{{item.content.text}}">
<text>{{item.content.txt}}</text>
</view>
<view class='comment-voice' wx:if="{{item.content.audio && item.content.audio.url}}">
<view data-url='{{item.content.audio.url}}' class='comment-voice-item' catchtap="playAudio">
<image src='/images/icon/wx_app_voice.png' class='voice-play'></image>
<text>{{item.content.audio.timeLen}}</text>
</view>
</view>
<view class='comment-img' wx:if="{{item.content.img.length!=0}}">
<block wx:for="{{item.content.img}}" wx:for-item="img">
<image src='{{img}}' mode='aspectFill'></image>
</block>
</view>
</view>
<view class='comment-time'>{{item.create_time}}</view>
</view>
</block>
</view>
</view>
2.8.2 添加评论列表的样式
post-comment.wxss
/* pages/post/post-comment/post-comment.wxss */
.comment-detail-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-y: hidden;
}
.comment-main-box {
position: absolute;
top: 0;
left: 0;
bottom: 100rpx;
right: 0;
overflow-y: auto;
}
.comment-title {
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
color: #212121;
border-bottom: 1px solid #ccc;
margin-left: 24rpx;
padding: 8rpx 0;
font-family: Microsoft YaHei;
}
.comment-item {
margin: 20rpx 0 20rpx 24rpx;
padding: 24rpx 24rpx 24rpx 0;
border-bottom: 1rpx solid #f2e7e1;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-item-header {
display: flex;
flex-direction: row;
align-items: center;
}
.comment-item-header .left-img image {
height: 80rpx;
width: 80rpx;
}
.comment-item-header .right-user {
margin-left: 30rpx;
line-height: 80rpx;
}
.comment-item-header .right-user text {
font-size: 26rpx;
color: #212121;
}
.comment-body {
font-size: 26rpx;
line-height: 26rpx;
color: #666;
padding: 10rpx 0;
}
.comment-text text {
line-height: 50rpx;
}
.comment-voice-item {
display: flex;
flex-direction: row;
align-items: center;
width: 200rpx;
height: 64rpx;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 6rpx;
}
.comment-voice-item .voice-play {
height: 64rpx;
width: 64rpx;
}
.comment-voice-item text {
margin-left: 60rpx;
color: #212121;
font-size: 22rpx;
}
.comment-img {
margin: 10rpx 0;
}
.comment-img image {
max-width: 32%;
margin-right: 10rpx;
width: 220rpx;
height: 22orpx;
}
.comment-time {
margin-top: 10rpx;
color: #ccc;
font-size: 24rpx;
}
image.png
-
样式注意点：
1）overflow-y: hidden
image.png
image.png
2）.comment-item:last-child
image.png
2.9 实现图片预览
image.png
2.9.1 实现图片预览
post-comment.wxml
<view class='comment-img' wx:if="{{item.content.img.length!=0}}">
<block wx:for="{{item.content.img}}" wx:for-item="img" wx:for-index="imgIdx">
<image src='{{img}}' mode='aspectFill' catchtap='previewimg' data-comment-idx='{{idx}}' data-img-idx='{{imgIdx}}'></image>
</block>
</view>
image.png
image.png
image.png
2.10 实现提交评论的界面
2.10.1 评论框的骨架
post-comment.wxml
<view class="input-box">
<view class="send-msg-box">
<view hidden="{{useKeyboardFlag}}" class="input-item">
<image src="/images/icon/wx_app_keyboard.png" class="comment-icon keyboard-icon" catchtap="switchInputType"></image>
<input class="input speak-input {{recodingClass}}" value="按住 说话" disabled="disabled" catchtouchstart="recordStart" catchtouchend="recordEnd" />
</view>
<view hidden="{{!useKeyboardFlag}}" class="input-item">
<image class="comment-icon speak-icon" src="/images/icon/wx_app_speak.png" catchtap="switchInputType"></image>
<input class="input keyboard-input" value="{{keyboardInputValue}}" bindconfirm="submitComment" bindinput="bindCommentInput" placeholder="说点什么吧……" />
</view>
<image class="comment-icon add-icon" src="/images/icon/wx_app_add.png" catchtap="sendMoreMsg"></image>
<view class="submit-btn" catchtap="submitComment">发送</view>
</view>
</view>
2.10.2 评论框的样式
post-comment.wxss
/*******************评论框**********************/
.input-box{
position: absolute;
bottom: 0;
left:0;
right: 0;
background-color: #EAE8E8;
border-top:1rpx solid #D5D5D5;
min-height: 100rpx;
z-index: 1000;
}
.input-box .send-msg-box{
width: 100%;
height: 100%;
display: flex;
padding: 20rpx 0;
}
.input-box .send-more-box{
margin: 20rpx 35rpx 35rpx 35rpx;
}
.input-box .input-item{
margin:0 5rpx;
flex:1;
width: 0%;
position: relative;
}
.input-box .input-item .comment-icon{
position: absolute;
left:5rpx;
top:6rpx;
}
.input-box .input-item .input{
border: 1rpx solid #D5D5D5;
background-color: #fff;
border-radius: 3px;
line-height: 65rpx;
margin:5rpx 0 5rpx 75rpx ;
font-size: 24rpx;
color: #838383;
padding: 0 2%;
}
.input-box .input-item .keyboard-input{
width: auto;
max-height: 500rpx;
height: 65rpx;
word-break:break-all;
overflow:auto;
}
.input-box .input-item .speak-input{
text-align: center;
color: #212121;
height: 65rpx;
}
.input-box .input-item .recoding{
background-color: #ccc;
}
.input-box .input-item .comment-icon.speak-icon{
height: 62rpx;
width: 62rpx;
}
.input-box .input-item .comment-icon.keyboard-icon{
height: 60rpx;
width: 60rpx;
left:6rpx;
}
.input-box .add-icon{
margin:0 5rpx;
height: 65rpx;
width: 65rpx;
transform: scale(0.9);
margin-top: 2px;
}
.input-box .submit-btn{
font-size: 24rpx;
margin-top: 5rpx;
margin-right: 8rpx;
line-height: 60rpx;
width: 120rpx;
height: 60rpx;
background-color: #4A6141;
border-radius:5rpx;
color: #fff;
text-align: center;
font-family:Microsoft Yahei;
}
.send-more-box .more-btn-item{
display: inline-block;
width: 110rpx;
height: 145rpx;
margin-right: 35rpx;
text-align: center;
}
.more-btn-main{
width: 100%;
height:60rpx;
text-align: center;
border:1px solid #D5D5D5;
border-radius: 10rpx;
background-color: #fbfbfc;
margin: 0 auto;
padding:25rpx 0
}
.more-btn-main image{
width: 60rpx;
height: 60rpx;
}
.send-more-box .more-btn-item .btn-txt{
color: #888888;
font-size: 24rpx;
margin:10rpx 0;
}
.send-more-result-main{
margin-top: 30rpx;
}
.send-more-result-main .file-box{
margin-right: 14rpx;
height: 160rpx;
width: 160rpx;
position: relative;
display: inline-block;
}
.send-more-result-main .file-box.deleting{
animation:deleting 0.5s ease;
animation-fill-mode: forwards;
}
@keyframes deleting {
0%{
transform: scale(1);
}
100%{
transform: scale(0);
}
}
.send-more-result-main image{
height: 100%;
width: 100%;
}
.send-more-result-main .remove-icon{
position: absolute;
right: 5rpx;
top: 5rpx;
}
.send-more-result-main .file-box .img-box {
height: 100%;
width: 100%;
image.png
2.11 wx:if 与 hidden控制元素显示和隐藏
在小程序中，隐藏UI元素的方法有俩种：
1）wx:if
2）hidden
image.png
它们都是通过一个状态变量来控制元素的显示和隐藏
- wx:if 和 hidden 有什么异同？
1）wx:if的切换和渲染机制较为复杂，当wx:if进行切换时，MINA框架有一个局部渲染的过程，它会确保条件块在切换时销毁或者重新渲染。
2）wx:if是惰性的，如果初始渲染条件为false,那么MINA框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
3）hidden就比较简单，组件始终会被渲染，只是简单地控制显示与隐藏
4）一般来说，wx:if有更高的切换消耗，而hidden有更高的初始化渲染消耗。因此，在需要频繁切换的情境下用hidden更好，在运行时条件不太可能改变时用wx:if较好。
2.12 实现文字评论框和语音评论框的切换
2.12.1 初始化useKeyboardFlag
post-comment.js
image.png
2.12.1 切换useKeyboardFlag
post-comment.js
image.png
image.png
image.png
2.13 input组件
属于小程序中最为重要的数据输入组件
2.13.1 属性介绍
image.png
image.png
2.13.2 事件介绍
image.png
由MINA框架直接指定的，属于非冒泡事件，不需要在事件名称前面再添加catch和bind
- bindinput事件较为特殊，具有如下几个特点：
1）当用户输入字符时触发
2）每当用户输入或者删除一个字符时，bindinput事件都会触发一次
3）可以在事件响应函数中使用return返回一个字符或者字符串，该字符串将替换input输入框的显示文本
4）比较适合用来做“即时搜索”的功能
input输入值都是在事件对应的响应函数中使用 event.detail.value来获取
2.14 bindinput事件
2.14.1 响应bindinput事件
post-comment.js
//获取用户输入
bindCommentInput:function(event){
var val = event.detail.value;
console.log(val);
this.data.keyboardInputValue = val;
}
image.png
2.15 屏蔽评论关键字
bindinput还有一个有意思的特性，就是在事件响应函数中可以return一个值来代替当前的输入值，并显示在input中
2.15.1 bindinput的return值
post-comment.js
将这个函数的代码临时改一下，用来测试
bindCommentInput: function (event) {
var val = event.detail.value;
return val + "#";
image.png
2.15.2 屏蔽关键字“qq”
post-comment.js
bindCommentInput: function(event) {
var value = event.detail.value;
var pos = event.detail.cursor;
console.log("pos======" + pos);
if (pos != -1) {
//光标在中间
var left = event.detail.value.slice(0, pos);
console.log(left);
//计算光标的位置
pos = left.replace(/qq/g, "*").length;
}
//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
return {
value: value.replace(/qq/g, "*"),
cursor: pos
};
}
image.png
2.15.3 简化版屏蔽关键字“qq”
post-comment.js
bindCommentInput: function(event) {
var value = event.detail.value;
return value.replace(/qq/g, "*");
}
image.png
2.16 实现自定义发送按钮
2.16.1 实现 submitComment 方法
post-comment.js
//提交用户评论
submitComment: function(event) {
var newData = {
username: "青石",
avatar: "/images/avatar/avatar-3.png",
//评论时间
create_time: new Date().getTime() / 1000,
//评论内容
content: {
text: this.data.keyboardInputValue
},
};
if (!newData.content.text) {
//如果没有评论内容，就不执行任何操作
return;
}
//保存新评论到缓存数据库中
this.dbPost.newComment(newData);
//显示操作结果
this.showCommitSuccessToast();
//重新渲染并绑定所有评论
this.bindCommentData();
//恢复初始状态
this.resetAllDefaultStatus();
},
2.16.2 编写newComment方法
DBPost.js
//发表评论
newComment(newComment) {
this.updatePostData("comment", newComment);
}
2.16.3 在updatePostData中处理新评论
DBPost.js
//更新本地的点赞、评论信息、收藏、阅读量
updatePostData(category, newComment) {
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;
case 'up':
if (!postData.upStatus) {
postData.upNum++;
postData.upStatus = true;
} else {
postData.upNum--;
postData.upStatus = false;
}
break;
case "comment":
postData.comments.push(newComment);
postData.commentNum++;
break;
default:
break;
}
2.16.4 编写新增评论成功的提示方法
post-comment.js
//评论成功
showCommitSuccessToast: function() {
wx.showToast({
title: '评论成功',
duration: 1000,
icon: "success"
})
},
2.16.5 重新绑定评论数据
post-comment.js
bindCommentData: function() {
var comments = this.dbPost.getCommentData();
//绑定评论数据
this.setData({
comments: comments
})
},
2.16.6 重置input组件的输入值
post-comment.js
//将所有相关的按钮状态、输入状态都回复到初始化状态
resetAllDefaultStatus: function() {
//清空评论框
this.setData({
keyboardInputValue: ""
})
}
image.png
2.17 同时支持模拟器回车、真机点击“完成”发送评论
如果要想在模拟器中实现回车发送评论信息的功能，可以使用如下几个input事件：
- bindchange（早期版本存在，新版本说明文档不在了，不过依然有效，只是不建议用）
- bindblur：可以触发回车的原理是：点击回车后，input组件将失去焦点，从而触发bindblur事件
- bindconfirm：可以在真机上响应键盘的“完成”点击事件，同时也可以在模拟器中响应键盘的“回车”事件
2.17.1 添加bindcomfirm事件
post-comment.wxml
image.png
2.18 图片与拍照评论的界面实现
2.18.1 选择图片与拍照面板代码
post-comment.wxml
<view class="send-msg-box">
<view hidden="{{useKeyboardFlag}}" class="input-item">
<image src="/images/icon/wx_app_keyboard.png" class="comment-icon keyboard-icon" catchtap="switchInputType"></image>
<input class="input speak-input {{recodingClass}}" value="按住 说话" disabled="disabled" catchtouchstart="recordStart" catchtouchend="recordEnd" />
</view>
<view hidden="{{!useKeyboardFlag}}" class="input-item">
<image class="comment-icon speak-icon" src="/images/icon/wx_app_speak.png" catchtap="switchInputType"></image>
<input class="input keyboard-input" value="{{keyboardInputValue}}" bindconfirm="submitComment" bindinput="bindCommentInput" placeholder="说点什么吧……" />
</view>
<image class="comment-icon add-icon" src="/images/icon/wx_app_add.png" catchtap="sendMoreMsg"></image>
<view class="submit-btn" catchtap="submitComment">发送</view>
</view>
<view class="send-more-box" hidden="{{!sendMoreMsgFlag}}">
<!--选择图片和拍照的按钮-->
<view class="send-more-btns-main">
<view class="more-btn-item" catchtap="chooseImage" data-category="album">
<view class="more-btn-main">
<image src="/images/icon/wx_app_upload_image.png"></image>
</view>
<text>照片</text>
</view>
<view class="more-btn-item" catchtap="chooseImage" data-category="camera">
<view class="more-btn-main">
<image src="/images/icon/wx_app_camera.png"></image>
</view>
<text>拍照</text>
</view>
</view>
<!--显示选择的图片-->
<view class="send-more-result-main" hidden="{{chooseFiles.length==0}}">
<block wx:for="{{chooseFiles}}" wx:for-index="idx">
<!--如果删除其中一个，则对其添加deleting 样式；-->
<view class="file-box {{deleteIndex==idx?'deleting':''}}">
<view class="img-box">
<image src="{{item}}" mode="aspectFill"></image>
<icon class="remove-icon" type="cancel" size="23" color="#B2B2B2" catchtap="deleteImage" data-idx="{{idx}}" />
</view>
</view>
</block>
</view>
</view>
</view>
</view>
2.18.2 编写sendMoreMsg方法
image.png
post-comment.js
image.png
sendMoreMsg:function(){
this.setData({
sendMoreMsgFlag: !this.data.sendMoreMsgFlag
})
}
image.png
2.19 实现从相册选择照片与拍照
2.19.1 新增chooseFiles变量
post-comment.js
/**
* 页面的初始数据
*/
data: {
//控制使用键盘还是发送语音
useKeyboardFlag: true,
//控制input组件的初始值
keyboardInputValue:"",
//控制是否显示图片选择面板
sendMoreMsgFlag:false,
//保存已经选择的图片
chooseFiles:[]
},
2.19.2 实现选择图片与拍照功能
post-comment.js
//选择本地照片与拍照
chooseImage: function(event) {
//已选择图片数组
var imgArr = this.data.chooseFiles;
//只能上传3张照片，包括拍照
var leftCount = 3 - imgArr.length;
if (leftCount <= 0) {
return;
}
var sourceType = [event.currentTarget.dataset.category],
that = this;
console.log("sourceType==============" + sourceType);
console.log("that==============" + that);
wx.chooseImage({
count: leftCount,
sourceType: sourceType,
success: function(res) {
that.setData({
chooseFiles: imgArr.concat(res.tempFilePaths)
})
},
})
}
image.png
image.png
注意，sourceType的传值过程
image.png
2.20 icon图片
image.png
image.png
2.21 删除已选择的图片
2.21.1 deleteImage方法
post-comment.js
//删除已经选择的图片
deleteImage: function(event) {
var index = event.currentTarget.dataset.idx;
var that = this;
that.data.chooseFiles.splice(index, 1);
that.setData({
chooseFiles: that.data.chooseFiles
})
}
获取当前删除图片的序号，并且将该图片的URL从 this.data.chooseFiles数组中删除，重新绑定chooseFiles变量即可
2.22 在小程序中使用CSS 3动画
image.png
如果delete的值等于当前图片的序号，就说明该图片是要被删除的，需要添加一个deleteing动画
image.png
2.22.1 修改deleteImage方法
post-comment.js
image.png
//删除已经选择的图片
deleteImage: function(event) {
var index = event.currentTarget.dataset.idx;
var that = this;
that.setData({
deleteIndex:index
});
that.data.chooseFiles.splice(index, 1);
setTimeout(function(){
that.setData({
deleteIndex:-1,
chooseFiles: that.data.chooseFiles
})
},1000)
}
image.png
2.23 实现图片评论的发送
实现原理：把当前的this.data.chooseFiles所保存的图片地址存入数据库缓存中，并且重新渲染评论列表即可。
修改如下的方法
2.23.1 修改submitComment方法
post-comment.js
//提交用户评论
submitComment: function(event) {
var imgs = this.data.chooseFiles;
var newData = {
username: "青石",
avatar: "/images/avatar/avatar-3.png",
//评论时间
create_time: new Date().getTime() / 1000,
//评论内容
content: {
text: this.data.keyboardInputValue,
img:imgs
},
};
if (!newData.content.text && imgs.length == 0) {
//如果没有评论内容，就不执行任何操作
return;
}
//保存新评论到缓存数据库中
this.dbPost.newComment(newData);
//显示操作结果
this.showCommitSuccessToast();
//重新渲染并绑定所有评论
this.bindCommentData();
//恢复初始状态
this.resetAllDefaultStatus();
},
2.23.2 修改submitComment方法
post-comment.js
//将所有相关的按钮状态、输入状态都回复到初始化状态
resetAllDefaultStatus: function() {
//清空评论框
this.setData({
keyboardInputValue: "",
chooseFiles:[],
sendMoreMsgFlag:false
})
},
image.png
2.24 实现语音信息的发送
- 发送语音评论的操作过程：
1）切换到语音面板
2）长按“按住说话”这个按钮
3）说话
4）松开“按住说话”，语音信息自动发送
[图片上传中...(image.png-a8f196-1529334605160-0)]
2.24.1 实现recodrdStart
post-comment.js
//开始录音
recordStart: function() {
var that = this;
this.setData({
recodingClass: "recoding"
});
//记录录音开始时间
this.startTime = new Date();
console.log("this.startTime============" + this.startTime);
wx.startRecord({
success: function(res) {
//计算录音时长
var diff = (that.endTime - that.startTime) / 1000;
console.log("diff============" + diff);
diff = Math.ceil(diff);
console.log("diff======ceil======" + diff);
//发送录音
that.submitVoiceComment({
url: res.tempFilePath,
timeLen: diff
});
},
fail: function(res) {
console.log("fail============" + res);
},
complete: function(res) {
console.log("complete============" + res);
}
})
},
2.24.2 结束录音
post-comment.js
//结束录音
recordEnd: function() {
this.setData({
recodingClass: ""
});
this.endTime = new Date();
wx.stopRecord();
},
2.24.3 发送语音评论
post-comment.js
//提交录音
submitVoiceComment: function (audio){
var newData = {
username: "青石",
avatar: "/images/avatar/avatar-3.png",
//评论时间
create_time: new Date().getTime() / 1000,
//评论内容
content: {
text: "",
img: [],
audio:audio
},
};
console.log("submitVoiceComment====create_time=========" + newData.create_time);
//保存新评论到缓存数据中
this.dbPost.newComment(newData);
//显示操作结果
this.showCommitSuccessToast();
//重新渲染并且绑定所有评论
this.bindCommentData();
}
image.png
image.png
2.25 实现语音信息的暂停与播放
语音评论的播放需要满足以下几个播放场景。假设有两个信息------A语音和B语音，当点击A语音时：
- 如果A语音处于未播状态，就开始播放A语音
- 如果A语音处于暂停状态，就继续播放A语音
当点击B语音时： - B语音的行为同上述A语音
- 无论A语音处于何种状态，都将立刻被中断；被中断后，再次点击A语音，A语音重新开始播放
2.25.1 发送语音评论
post-comment.js
playAudio: function(event) {
console.log("playAudio=============");
var url = event.currentTarget.dataset.url,
that = this;
console.log("url=============" + url);
//暂停当前录音
if (url == this.data.currentAudio) {
wx.pauseVoice();
this.data.currentAudio = ""
//播放录音
} else {
this.data.currentAudio = url;
wx.playVoice({
filePath: url,
complete: function() {
//只有当录音播放完毕后才会执行
that.data.currentAudio = ""
}
})
}
}
2.25.2 定义currentAudio变量
post-comment.js
data: {
//控制使用键盘还是发送语音
useKeyboardFlag: true,
//控制input组件的初始值
keyboardInputValue: "",
//控制是否显示图片选择面板
sendMoreMsgFlag: false,
//保存已经选择的图片
chooseFiles: [],
//被删除的图片序号
deleteIndex: -1,
//保存当前正在播放语音的URL
currentAudio: ''
},
image.png
2.26 用户授权
使用某些特定的API，是需要用户主动授权的，比如，调用wx.startRecord接口录音时，需要用户主动授权，如下所示：
image.png
如果用户点击确定后，以后使用该功能的时候都不会提示，如果要让弹出授权框，需要手动清除授权文件，如下所示：
image.png
2.27 解决真机运行时评论页面滑动卡顿的问题
image.png
2.28 文章阅读计算功能
2.28.1 阅读数+1
post-detail.js
//阅读量+1
addReadingTimes:function(){
this.dbPost.addReadingTimes();
}
2.28.2 阅读数+1的缓存操作方法
DBPost.js
//阅读量+1
addReadingTimes() {
this.updatePostData("reading");
}
2.28.3 updatePostData方法最终代码
DBPost.js
//更新本地的点赞、评论信息、收藏、阅读量
updatePostData(category, newComment) {
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;
case 'up':
if (!postData.upStatus) {
postData.upNum++;
postData.upStatus = true;
} else {
postData.upNum--;
postData.upStatus = false;
}
break;
case "comment":
postData.comments.push(newComment);
postData.commentNum++;
break;
case "reading":
postData.readingNum++;
break;
default:
break;
}
2.28.4 调用addReadingTimes方法
post-detail.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var postId = options.id;
this.dbPost = new DBPost(postId);
this.postData = this.dbPost.getPostItemById().data;
this.setData({
post:this.postData
})
this.addReadingTimes();
},
每次进来阅读量都会加1
image.png
image.png
