WeChat 애플릿 개발 데이터를 필터링하는 방법

이 글은 WeChat 미니 프로그램이 wxs 유형의 파일을 사용하여 데이터 필터링을 구현하는 방법을 소개합니다. WeChat 미니 프로그램 개발을 배우는 친구들에게 도움이 되길 바랍니다!

WeChat 애플릿 개발 데이터 필터링 구현 방법

WeChat 애플릿의 wxml과 js의 내부 구현 메커니즘이 별도로 컴파일되기 때문입니다. 따라서 wxml에서는 js 함수를 호출할 방법이 없습니다. 이로 인해 WXML에는 일반적으로 사용되는 기능이 부족해집니다. 즉, 뷰 계층에서 데이터 형식을 지정할 수 있는 방법이 없습니다.

추천 학습: 미니 프로그램 개발

예를 들어 백엔드에서 타임스탬프 데이터가 포함된 배열을 가져온 다음 이 날짜를 2017-01-01로 인터페이스에 형식화하고 표시해야 합니다. Vue 및 Angular와 같은 프런트 엔드 웹 프레임워크에서 뷰 계층은 일반적으로 필터와 같이 비교적 사용하기 쉬운 솔루션을 제공합니다. Vue에는 이러한 메소드가 없습니다.

하지만 미니 프로그램에서 실행되는 wxs 유형 파일은 이러한 문제를 해결하기 위한 것입니다.

사용

먼저 새로운 filter.wxs 파일을 만듭니다(wxml 파일에 직접 작성할 수도 있지만 공용 메서드는 별도로 만들어야 합니다).

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,
};

wxml 파일에서

Date 사용: {{filter.formatDate(필터링할 타임스탬프)}}

Notes

wxs는 js 파일과 다릅니다. 따라서 많은 js API가 지원되지 않습니다. 특정 지원에 대해서는 공식 문서를 참조하세요.

예를 들어, 날짜를 얻으려면 원래 new Date()를 호출했습니다. wxs에서는 지원되지 않지만 애플릿은 대신 전역 함수 getDate()를 제공합니다.

PHP 중국어 웹사이트, 다수의 navicat 튜토리얼 학습을 환영합니다!

위 내용은 WeChat 애플릿 개발 데이터를 필터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!