Introduction to the implementation method of data filtering in WeChat applet (code)

This article brings you an introduction to the implementation method of data filtering in WeChat mini programs (code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Because the internal implementation mechanisms of wxml and js of WeChat applet are compiled separately. So there is no way to call js functions in wxml. This will cause WXML to lack a commonly used function, that is, there is no way to format data at the view layer. For example, we obtain an array containing timestamp data from the backend, and then need to format and display these dates on the interface as a date format of 2017-01-01. In Vue, Front-end web frameworks such as Angular generally provide relatively easy-to-use solutions such as filters in the view layer. Vue does not have these methods. However, the wxs type file launched by the mini program is to solve this kind of problem.

Use

First create a new filter.wxs file (you can also write it directly in the wxml file, but the public method should still create a separate file).

var formatDate = function (timestamp,option) {
  var date = getDate(parseInt(timestamp));
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = function(){
    if (date.getHours()<10){  //补‘0’
      return &#39;0&#39; + date.getHours()
    }
    return date.getHours();
  }
  var minute = function () {
    if (date.getMinutes() < 10) {
      return &#39;0&#39; + date.getMinutes()
    }
    return date.getMinutes();
  }
  var second = function () {
    if (date.getSeconds() < 10) {
      return &#39;0&#39; + date.getSeconds()
    }
    return date.getSeconds();
  }

  if (option==&#39;notime&#39;){  //不需要时间
    return year + &#39;-&#39; + month + &#39;-&#39; + day;
  }

  return year + &#39;-&#39; + month + &#39;-&#39; + day + &#39; &#39; + hour() + &#39;:&#39; + minute() + ":" + second();
}

module.exports = {
  formatDate: formatDate,
};

Using

<wxs src=&#39;filter.wxs&#39; module=&#39;filter&#39; />
  <view>日期：{{filter.formatDate(要过滤的时间戳)}}</view>

in wxml files

Notes

wxs is different from js files. Therefore, many js APIs are not supported. Please see the official documentation for specific support.

The above is the detailed content of Introduction to the implementation method of data filtering in WeChat applet (code). For more information, please follow other related articles on the PHP Chinese website!