微信小順序WXS不相識一下？騷騷的完成各大前端框架中的filter

媒介

近來有在做小順序開闢，在開闢的過程當中遇到一點小題目，形貌一下先。

本人在職的公司關於背景獵取的 json 數據須要做過濾轉義的許多，差別的狀況碼會對應差別的筆墨，然則在微信小順序中又沒有相似 vue 中的 | 要領舉行疾速的過濾，看了前人的代碼大都是用數據遍歷洗數據來完成的，說實話，很貧苦，縱然提取了大眾要領那也貧苦，總之要洗數據就貧苦（對，我就是這麼懶，懶人推進天下生長 =3=）

在翻看小順序的文檔的時刻，恰好看到了 WXS 的引見 官方文檔 一拍腦門，這不就成了么？

正文

WXS 為何物

在上代碼之前先簡樸的引見一下 WXS 是什麼，以及和 Javascript 有什麼區別，雖然官方文檔中都有，但我以為博客的存在意義就是只管削減看官們的頁面跳轉，能夠在一個頁面申明的題目就不要再跳轉，外鏈應當作為課後拓展的手腕。

• WXS 引見

  • 是小順序出的一套劇本語言，用於 wxml 模板文件中，在模板文件中能夠完成頁面的構造。
  • 不依賴於運轉時的基本庫劇本，能夠在所有版本的小順序中運轉。
  • WXS 中不能挪用 Javascript 中定義的函數或許變量，也不能挪用小順序供應的 API，他的運轉環境和 Javascript 是斷絕的。
  • 小順序的前提襯着和輪迴襯着對 WXS 是無效的，就是說假如 WXS 代碼包裹在未襯着的代碼中，只需襯着的 wxml 部份挪用了此模塊，此段 WXS 代碼依舊會被加載。
  • 因為運轉環境的差別，在 ios 裝備上小順序的 WXS 會比 Javascript 快 2~20 倍，在 android 裝備上運轉效力無異。
  • 模塊想要暴露本身的私有變量和要領，只能經由過程 module.exports 完成。
  • 若在模塊中想要援用其他模塊，只能經由過程 require 完成。
  • 只能運用 var 來定義變量，表現形式和 Javascript 一樣，會有變量提拔。
  • WXS 模塊只能在定義模塊的 wxml 文件中被訪問到，運用 或 時，WXS 模塊不會被引入到對應的 wxml 文件中。
  • 不能運用 new Date() 應當運用 getDate()。

準確的運用 WXS

上代碼

起首，新建一個 config.wxs 文件，用於存儲狀況碼對應轉義后的筆墨。

var orderType = {
"-1": "type one",
"0": "type two",
"1": "type three"
};
module.exports.orderType = orderType;

能夠看到我們對外暴露變量的時刻用的是 module.exports，在 wxs 文件中只能運用該要領 官方文檔 一樣，在引入其他模塊的時刻，只能運用 require。

接着，建立一個 index.wxs 文件，用於對外暴露一些過濾的要領。

var cOnfig= require("./config.wxs");
function _filterOrderType(value) {
return config.orderType[value.toString()] || "order type undefined"
}
// 時候戳轉換成 yyyy-MM-dd HH:mm:ss
function _filterTimestamp(value) {
// 有些特別 不能運用 new Date()
var time = getDate(value);
var year = time.getFullYear();
var mOnth= time.getMonth() + 1;
var date = time.getDate() <10;
var hour = time.getHours() <10;
var minute = time.getMinutes() <10;
var secOnd= time.getSeconds() <10;
mOnth= month <10 ? "0" + month : month;
date = date <10 ? "0" + date : date;
hour = hour <10 ? "0" + hour : hour;
minute = minute <10 ? "0" + minute : minute;
secOnd= second <10 ? "0" + second : second;
return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}
module.exports._filterOrderType = _filterOrderType;
module.exports._filterTimestamp = _filterTimestamp;

末了在我們須要舉行過濾處置懲罰的 wxml 頁面上引入這個模塊，運用即可。


{{filter._filterOrderType(item.type)}}
{{filter._filterTimestamp(item.time)}}

這裏須要注重一下，在 wxml 頁面上運用模塊的時刻，須要用一個 module="filter" 或許其他的定名來包裹。

結語

WXS 和 Javascript 雖然相似，然則照樣有一些差別的處所，假如在 debug 的時刻發明報錯了，能夠在底下復興或許直接私信我，雖然不能秒回，然則多一個人多一條思緒，或許我能給您供應一些別的思緒，或許您的題目會給我帶來一些新的思索，我恰是這麼期待着。

本文能夠隨便轉載，只需附上原文地點即可。

假如您以為我的博文對您有所協助，請不吝讚揚，點贊也是讓我動力滿滿的手腕 =3=。