微信小程序WEPY不支持过滤器的替代方案

用惯了VUE和Angular的小伙伴们,肯定很喜欢过滤器这个功能,非常的简介和好用
课时微信小程序不支持过滤器,从而导致WEPY和MPVUE等开发微信小程序的框架也不支持过滤器
对于单一的数据,还是比较好处理的,写一个计算属性就能解决问题
我遇到的问题是:

在一个列表中,创建时间字段的格式化显示

返回的是一个时间戳,VUE的话很好处理,一个过滤器就解决了,可现在没有过滤器了,我们怎么办呢?

想法一

接口请求到数据以后,对数据进行重新加工,将时间戳转换为指定格式的数据,然后存起来待用;
这种方法的缺点非常的明显,便利数据这种事情会拖慢程序运行速度,而且代码复用性很低

想法二

写一个工具方法,这个方法可以将列表中对象的某个属性进行统一的格式化
这个方法解决了代码复用的问题,可性能问题还是没有解决,关键是不够优雅

解决方案

那天,一阵清风吹过,拂过的的秀发,吹入我的脑洞,发出嗡嗡的声响,然后我灵机一动,想出了一个办法

我们可以用组件来解决这个问题

如何解决呢:

• 首先是时间格式化的问题,我们使用moment.js对时间进行处理
  
  • 安装moment.js npm install moment --save
  • 新建一个组件dateFormat
  • 在组件中引入moment var moment = require('moment')

• 然后是书写组件,具体组件代码如下

  <script>
  import wepy from 'wepy'
  var moment = require('moment')
  export default class date extends wepy.component {
    props = {
      date: {},
      format: {
        type: String,
        default: 'YYYY-MM-DD HH:mm:ss'
      }
    }
    computed = {
      formatDate () {
        return moment(this.date).format(this.format)
      }
    }
  }
  </script>
  <template>
    <view>{{formatDate}}</view>
  </template>
  

  • 最后是引入组件,具体代码如下:

<!--我的消息页面-->
<style lang="less">
.message {
  margin-left: 47rpx;
  margin-right: 47rpx;
  .list { margin-top: 8rpx;
    .title { margin-bottom: 16rpx;
      margin-top: 32rpx;
      display: flex;
      .point { width: 20rpx;
        height: 20rpx;
        margin-top: 6rpx;
        margin-bottom: 6rpx;
        background-color: #f7535c;
        border-radius: 2rpx;
        margin-right: 20rpx;
      }
      .text {
        height: 32rpx;
        line-height: 32rpx;
        font-size: 32rpx;
        color: #111111;
      }
    }
    .content {
      line-height: 32rpx;
      font-size: 24rpx;
      color: #666666;
    }
    .time {
      text-align: right;
      font-size: 24rpx;
      height: 40rpx;
      line-height: 40rpx;
      color: #999999;
      margin-bottom: 24rpx;
    }
    .placehold {
      background-color: #f3f4f5;
      position: relative;
      left: -47rpx;
      height: 16rpx;
      width: 748rpx;
      border: 1rpx solid #eeeeee;
    }
  }
}
</style>
<template>
  <view class="message">
    <view class="list">
      <repeat for="{{list}}" key="index" index="index" item="item">
        <view class="title">
          <view class="point"></view>
          <view class="text">{{item.title}}</view>
        </view>
        <view class="content">{{item.content}}</view>
        <view class="time">
          <dateformat></dateformat>
        </view>
        <view class="placehold"></view>
     </repeat> 
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
import DateFormat from '@/components/common/dateFormat'
var moment = require('moment')
export default class message extends wepy.page {
  data = {
    list: [{ title: 'message1', content: 'this is a test message,if you see that mains working' }]
  }
  components = {
    dateformat: DateFormat
  }
  computed = {
    formatDate () {
      return moment().format()
    }
  }
}
</script>