用慣了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>