WeChat 文章评论页（一）

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 七月老师 的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

授权许可

0 系列文章目录

01 WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
02 WeChat 文章列表页面（一）
03 WeChat 文章列表页面（二）
04 WeChat 模块、模板与缓存
05 WeChat 文章详情页
06 WeChat 文章评论页（一）

1 获取文章评论数据

通过 app.json 中的 pages 数组注册 post-comment 页面，该页面作为 post-detail 的子页面，用于文章评论，在 post.js 文件中添加 onCommentTap 方法进行页面跳转

// pages/post/post-detail/post-detail.js
onCommentTap: function (event) {
  const id = event.currentTarget.dataset.postId;
  wx.navigateTo({
    url: `../post-comment/post-comment?id=${id}`
  })
}

构建文章评论页的思路分为两部分，一是加载并显示当前文章已存在的评论，二是实现添加新评论的功能，我们在 postId 为 2 的《从童年呼啸而过的火车》文章中模拟了 4 条评论数据，即 comments 数组，将其读取并绑定到框架中

// pages/post/post-comment/post-comment.js
import { DBPost } from '../../../db/DBPost.js'

Page({
  data: {},
  onLoad: function(options) {
    let postId = options.id
    this.dbPost = new DBPost(postId)
    let comments = this.dbPost.getCommentData()
    // 绑定评论数据
    this.setData({
      comments: comments
    })
  }
})

// db/DBPost.js
let util = require('../util/util.js')

class DBPost {
  ...
  // 获取文章的评论数据
  getCommentData() {
    let itemData = this.getPostItemById().data
    // 按时间降序排列评论
    itemData.comments.sort(this.compareWithTime)
    let len = itemData.comments.length,
        comment
    for(let i = 0; i < len; i++) {
      // 将comment中的时间戳转换成可阅读格式
      comment = itemData.comments[i]
      comment.create_time = util.getDiffTime(comment.create_time, true)
    }
    return itemData.comments
  }

  compareWithTime(value1, value2) {
    let flag = parseFloat(value1.create_time) - parseFloat(value2.create_time);
    if (flag < 0) {
      return 1;
    } else if (flag > 0) {
      return -1
    } else {
      return 0;
    }
  }
}

// util/util.js
/*
 *根据客户端的时间信息得到发表评论的时间格式
 *多少分钟前，多少小时前，然后是昨天，然后再是月日
 * Para :
 * recordTime - {float} 时间戳
 * yearsFlag -{bool} 是否要年份
 */
function getDiffTime(recordTime, yearsFlag) {
  if (recordTime) {
    recordTime = new Date(parseFloat(recordTime) * 1000)
    let minute = 1000 * 60,
        hour   = minute * 60,
        day    = hour * 24,
        now    = new Date(),
        diff   = now - recordTime,
        result = ""
    if (diff < 0) {
      return result;
    }
    let weekR = diff / (7 * day),
        dayC  = diff / day,
        hourC = diff / hour,
        minC  = diff / minute
    if (weekR >= 1) {
      let 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) {
      let 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 ""
}

/*
 *拓展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')
 *使用方法 如下：
 *                       let date = new Date();
 *                       let 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) {
    let 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 (let 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
  }
})()
module.exports = {
  getDiffTime: getDiffTime
}

compareWithTime 方法用于将评论按照时间降序排列，保证最新的评论在最上方，util.getDiffTime 方法用于将评论的时间戳转化为“多少分钟前，多少小时前，昨天，月日”等格式，其中 util.getDiffTime 为公共方法，我们新建了一个 util 文件夹，将所有的公共方法都放置到该文件夹下

运行结果

评论支持文本、图片和录音 3 种类型，在 content 属性下，img 数组是评论中的图片，txt 是评论中的文本，audio 是评论中的音频，其中，图片类型评论最多只能包含 3 张图片，音频类型评论只能包含一条音频，一条评论可以包含文字和图片，音频类型评论不能包含文字和图片

2 显示文章评论数据

在每张 image 图片上注册 catchtap="previewImg" 事件，用来响应点击图片的操作，wx:for-index="imgIdx" 用以定义图片序号，自定义属性 data-comment-idx="{{idx}}" 用来绑定当前评论在评论数组中的序号，自定义属性 data-img-idx="{{imgIdx}}" 用来绑定图片在图片数组中的序号

<!--pages/post/post-comment/post-comment.wxml-->
<view class="comment-detail-box">
  <view class="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-txt" wx:if="{{item.content.txt}}">
            <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" wx:for-index="imgIdx">
              <image src="{{img}}" mode="aspectFill" catchtap="previewImg" data-comment-idx="{{idx}}" data-img-idx="{{imgIdx}}"></image>
            </block>
          </view>
        </view>
        <view class="comment-time">{{item.create_time}}</view>
      </view>
    </block>
  </view>
</view>

/* 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;-webkit-overflow-scrolling:touch;}
.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-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-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-txt text {line-height:50rpx;}
.comment-img {margin:10rpx 0;}
.comment-img image {max-width:32%;margin-right:10rpx;height:220rpx;width:220rpx;}
.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-time {margin-top:10rpx;color:#ccc;font-size:24rpx;}

// pages/post/post-comment/post-comment.js
Page({
  ...
  //预览图片
  previewImg: function (event) {
    //获取评论序号
    let commentIdx = event.currentTarget.dataset.commentIdx,
        //获取图片在图片数组中的序号
        imgIdx = event.currentTarget.dataset.imgIdx,
        //获取评论的全部图片
        imgs = this.data.comments[commentIdx].content.img;
    wx.previewImage({
        current: imgs[imgIdx], // 当前显示图片的http链接
        urls: imgs // 需要预览的图片http链接列表
    })
  }
})

运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub WeChat_06 上了，有需要的同学可自行下载

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^