WXS實現filter過濾器
ps: 說到過濾器，不多不說vue中提供了強大filter過濾器， 通過管道符
{{ message | capitalize }}使用微信小程序提供 WXS 模塊， 結合
WXML，可以構建出頁面的結構。寫的不好， 請大家多多指教。謝謝！
API
模塊
-
每一個
.wxs文件和<wxs>標籤都是一個單獨的模塊。 -
每個模塊都有自己獨立的作用域。即在一個模塊裏面定義的變量與函數，默認爲私有的，對其他模塊不可見。
-
一個模塊要想對外暴露其內部的私有變量與函數，只能通過
module.exports實現。
使用步驟
新建 .wxs 文件
- 例如： 在 util目錄下創建一個
filter.wxs文件。 - 在
filter.wxs中編寫所需方法並導出。 例：
// 手機號中間4位*
var replaceStar = function (array) {
var mphone = array.substring(0, 3) + '****' + array.substring(7);
return mphone;
}
// 保留兩位小數
var moneyFormat = function(money) {
return money.toFixed(2);
}
//導出
module.exports = {
replaceStar: replaceStar,
moneyFormat: moneyFormat
}
wxml組件中使用
- 通過
<wxs>標籤引用
//每個 wxs 模塊均有一個內置的 module 對象。
//src引入filter.wxs文件的相對路徑, module當前 <wxs> 標籤的模塊名
<wxs src="../../utils/filter.wxs" module="filter" />
- 頁面使用
//通過 模塊名.方法
<view wx:if="{{item.mobile != ''}}">{{filter.replaceStar(item.mobile)}}</view>
// total_money: 88.356
<view>費用:{{total_money}}<text>{{filter.moneyFormat(total_money)}}元</text></view>
輸出結果
137****2525
88.36
引用需注意如下幾點
- 只能引用
.wxs文件模塊，且必須使用相對路徑。 wxs模塊均爲單例，wxs模塊在第一次被引用時，會自動初始化爲單例對象。多個頁面，多個地方，多次引用，使用的都是同一個wxs模塊對象。- 如果一個
wxs模塊在定義之後，一直沒有被引用，則該模塊不會被解析與運行。