WeChat 애플릿의 데이터 필터링 구현 방법 소개(코드)

이 글은 WeChat 미니 프로그램(코드)의 데이터 필터링 구현 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

WeChat 애플릿의 wxml과 js의 내부 구현 메커니즘이 별도로 컴파일되기 때문입니다. 따라서 wxml에서는 js 함수를 호출할 방법이 없습니다. 이로 인해 WXML에는 일반적으로 사용되는 기능이 부족해집니다. 즉, 뷰 계층에서 데이터 형식을 지정할 수 있는 방법이 없습니다. 예를 들어, 백엔드에서 타임스탬프 데이터가 포함된 배열을 얻은 다음 Vue에서는 이러한 날짜를 인터페이스에 2017-01-01의 날짜 형식으로 표시해야 합니다. Angular와 같은 프런트엔드 웹 프레임워크는 일반적으로 뷰 계층의 필터와 같이 비교적 사용하기 쉬운 솔루션을 제공합니다. Vue에는 이러한 메소드가 없습니다. 그러나 미니 프로그램에서 실행되는 wxs 유형의 파일은 이러한 문제를 해결하기 위한 것입니다.

사용

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

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

wxml 파일에서

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

사용 시 주의사항

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

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