How to filter WeChat applet development data

This article introduces how WeChat mini programs use wxs type files to implement data filtering. I hope it will be helpful to friends who are learning WeChat mini program development!

How to implement filtering of WeChat applet development data

Because the internal implementation mechanism of wxml and js of WeChat applet is compiled separately of. 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.

Recommended learning: Small program development

For example, we get an array containing timestamp data from the backend, and then we need to format these dates on the interface The date format is displayed as 2017-01-01. In front-end web frameworks such as Vue and Angular, the view layer generally provides relatively easy-to-use solutions such as filters. Vue does not have these methods.

But 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).

varformatDate =function(timestamp,option){
vardate= getDate(parseInt(timestamp));
varyear =date.getFullYear()
varmonth =date.getMonth() +1
varday =date.getDate()
varhour =function(){
if(date.getHours()<10){
//补‘0’return&#39;0&#39;+date.getHours() 
}r
eturndate.getHours();
}
varminute =function(){
if(date.getMinutes() <10) {
return&#39;0&#39;+date.getMinutes() 
}
returndate.getMinutes(); 
}
varsecond =function(){
if(date.getSeconds() <10) {
return&#39;0&#39;+date.getSeconds() 
}
returndate.getSeconds(); }
if(option==&#39;notime&#39;){
//不需要时间returnyear +&#39;-&#39;+ month +&#39;-&#39;+ day; 
}
returnyear +&#39;-&#39;+ month +&#39;-&#39;+ day +&#39; &#39;+ hour() +&#39;:&#39;+ minute() +:+ second(); 
}
module.exports = {
formatDate: formatDate,
};

Use

Date in wxml file: {{filter.formatDate(timestamp to be filtered)}}

Note Matter

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

For example, to obtain the date, we originally called new Date(). It is not supported in wxs, but the applet provides a global function getDate() instead.

PHP Chinese website, a large number of navicat tutorials Welcome to learn!

The above is the detailed content of How to filter WeChat applet development data. For more information, please follow other related articles on the PHP Chinese website!