WeChat アプレット開発データをフィルタリングする方法

この記事では、WeChat ミニ プログラムが wxs タイプ ファイルを使用してデータ フィルタリングを実装する方法を紹介します。WeChat ミニ プログラム開発を学習している友人に役立つことを願っています。

WeChat アプレット開発データのフィルタリングの実装方法

WeChat アプレットの wxml と js の内部実装機構がコンパイルされているため、とは別に。したがって、wxml で js 関数を呼び出す方法はありません。これにより、WXML には一般的に使用される機能が欠けてしまいます。つまり、ビュー レイヤでデータをフォーマットする方法がありません。

推奨学習: 小規模プログラム開発

たとえば、タイムスタンプ データを含む配列をバックエンドから取得し、インターフェイスでこれらの日付をフォーマットする必要があります。日付形式は 2017-01-01 と表示されます。Vue や Angular などのフロントエンド Web フレームワークでは、ビュー レイヤーは通常、フィルターなどの比較的使いやすいソリューションを提供します。 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(フィルター対象のタイムスタンプ)}}

注意事項

#wxs は js ファイルとは異なります。したがって、多くの js API はサポートされていません。特定のサポートについては、公式ドキュメントを参照してください。

たとえば、日付を取得するには、最初は new Date() を呼び出しました。これは wxs ではサポートされていませんが、アプレットは代わりにグローバル関数 getDate() を提供します。

PHP 中国語 Web サイト、多数の

navicat チュートリアル 学習へようこそ!

以上がWeChat アプレット開発データをフィルタリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。