微信小程序 使用filter過濾器幾種方式
由于微信小程序 技術生態比較閉合，導致很多 現代前端框架很多積累出的成果都沒有實現(可能未來會逐一實現). 用慣了現代 再耍小程序 總感覺很不順手.
需要結果的請直接看最后的WXS
### View Filter
filter 理解為管道加工處理, 你扔給我一組數據 經過各種不同類型的管道加工 產出新的數據 但是又不會影響修改原數據, 最終展示給用戶.
現有前端框架filter一般:
time | dateTime('yyy-mm-dd')
使用 | 作為管道符 傳遞參數進行序列化
缺陷:
截止目前,小程序官方并沒有管道實現方式,以下列出了替代幾種方案，供大家選擇使用.
直接修改原數據
在請求完成之后 對返回值data進行一次數據處理 比如 抽象一個_formatListData方法對 返回進行二次處理.
_formatListData(list) {
return list.map((item) => {
let date = FormatUtil.getDateTime(item.childBirth);
item.filterChildBirth = `${date.y}-${date.M}-${date.d}`;
return item;
}
}
這種方式會給原數據添加新字段 filterChildBirth (原字段為 childBirth) . 最終展示也是顯示filterChildBirth 到view上面，多個需要filter的字段都通過這種方式去處理,很明顯 對一些業務型filter倒還好 如果遇到filter需要 共享 就比較坑.
ES6 get
data : {
time : 1511748300571
}
get time (){
return FormatUtil.getDate(this.data.time);
}
通過get方法來實現對字段顯示過濾. 只能操作對象 對數組中的item 比較無力.
WXS
微信小程序的架構分為 app-service 和 page-frame，分別運行于不同的線程。你在開發時寫的所有 JS 都是運行在 app-service 線程里的，而每個頁面各自的 WXML/WXSS 則運行在 page-frame 中。app-service 與 page-frame 之間通過橋協議通信（包括 setData 調用、canvas指令和各種DOM事件），涉及消息序列化、跨線程通信與evaluateJavascript()。這個架構的好處是：分開了業務主線程和顯示界面，即便業務主線程非常繁忙，也不會阻塞用戶在 page-frame 上的交互。一個小程序可以有多個 page-frame （webview），頁面間切換動畫比SPA更流暢。壞處是：在 page-frame 上無法調用業務 JS?？缇€程通信的成本很高，不適合需要頻繁通信的場景。業務 JS 無法直接控制 DOM。
作者：魯小夫
鏈接：https://www.zhihu.com/questio...
了解了wxs 設計初衷，我們也就知道能做什么事情了.
wxs 目前主要是增強 wxml 標簽的表達能力
ps : 因為運行在不同線程所以 js與wxs 不能相互引用的. 這就有可能在js中使用公共方法 在wxs中需要重新寫一份(為了共享filter) 造成代碼冗余.
通過wxs 實現共享filter:
- 首先我們建立共享filter文件夾,實現一個日期格式化
-
WXS 實現日期格式化（es6語法不能使用)
var DateFr = { getDate: function (time, splitStr) { if (!time) return ''; var date =getDate(time); var M = date.getMonth() + 1; var y = date.getFullYear(); var d = date.getDate(); if (M < 10) M = "0" + M; if (d < 10) d = "0" + d; if (splitStr) return y +splitStr + M +splitStr+d; else return { y: y, M: M, d: d }; } } module.exports = { getDate: DateFr.getDate } -
在業務頁面wxml中引用wxs
<wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>使用filter
<text >{{dateFr.getTime(item.createdAt,':')}}</text>結尾
wxs 基本滿足filter的場景:
共享filter場景 采用3
業務filter很多場景 采用1,3
簡單業務filter 數據非數組型場景 采用2
小程序還有很長的路要走,仍需繼續努力.
