由于微信小程序 技術(shù)生態(tài)比較閉合，導致很多 現代前端框架很多積累出的成果都沒(méi)有實(shí)現(可能未來(lái)會(huì )逐一實(shí)現). 用慣了現代 再耍小程序 總感覺(jué)很不順手.

需要結果的請直接看最后的WXS

View Filter

filter 理解為管道加工處理, 你扔給我一組數據 經(jīng)過(guò)各種不同類(lèi)型的管道加工 產(chǎn)出新的數據 但是又不會(huì )影響修改原數據, 最終展示給用戶(hù).

現有前端框架filter一般:

time | dateTime('yyy-mm-dd')

使用 | 作為管道符 傳遞參數進(jìn)行序列化

缺陷:

截止目前,小程序官方并沒(méi)有管道實(shí)現方式,以下列出了替代幾種方案，供大家選擇使用.

###直接修改原數據 在請求完成之后 對返回值data進(jìn)行一次數據處理 比如 抽象一個(gè)_formatListData方法對 返回進(jìn)行二次處理.

_formatListData(list) {
     return list.map((item) => {
          let date = FormatUtil.getDateTime(item.childBirth);
          item.filterChildBirth = `${date.y}-${date.M}-${date.d}`;
      return item;
    }
}

這種方式會(huì )給原數據添加新字段 filterChildBirth (原字段為 childBirth) . 最終展示也是顯示filterChildBirth 到view上面，多個(gè)需要filter的字段都通過(guò)這種方式去處理,很明顯 對一些業(yè)務(wù)型filter倒還好 如果遇到filter需要 共享 就比較坑.

ES6 get

data : {
  time : 1511748300571
}

 get time (){    
  return FormatUtil.getDate(this.data.time);
}

通過(guò)get方法來(lái)實(shí)現對字段顯示過(guò)濾. 只能操作對象 對數組中的item 比較無(wú)力.

WXS

微信小程序的架構分為 app-service 和 page-frame，分別運行于不同的線(xiàn)程。你在開(kāi)發(fā)時(shí)寫(xiě)的所有 JS 都是運行在 app-service 線(xiàn)程里的，而每個(gè)頁(yè)面各自的 WXML/WXSS 則運行在 page-frame 中。app-service 與 page-frame 之間通過(guò)橋協(xié)議通信（包括 setData 調用、canvas指令和各種DOM事件），涉及消息序列化、跨線(xiàn)程通信與evaluateJavascript()。這個(gè)架構的好處是：分開(kāi)了業(yè)務(wù)主線(xiàn)程和顯示界面，即便業(yè)務(wù)主線(xiàn)程非常繁忙，也不會(huì )阻塞用戶(hù)在 page-frame 上的交互。一個(gè)小程序可以有多個(gè) page-frame （webview），頁(yè)面間切換動(dòng)畫(huà)比SPA更流暢。壞處是：在 page-frame 上無(wú)法調用業(yè)務(wù) JS?？缇€(xiàn)程通信的成本很高，不適合需要頻繁通信的場(chǎng)景。業(yè)務(wù) JS 無(wú)法直接控制 DOM。 作者：魯小夫 鏈接：http://www.zhihu.com/question/64322737/answer/223446446

了解了wxs 設計初衷，我們也就知道能做什么事情了. wxs 目前主要是增強 wxml 標簽的表達能力

ps : 因為運行在不同線(xiàn)程所以 js與wxs 不能相互引用的. 這就有可能在js中使用公共方法 在wxs中需要重新寫(xiě)一份(為了共享filter) 造成代碼冗余.

通過(guò)wxs 實(shí)現共享filter:

1. 首先我們建立共享filter文件夾,實(shí)現一個(gè)日期格式化

   

2. WXS 實(shí)現日期格式化（es6語(yǔ)法不能使用)

   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
    }

3. 在業(yè)務(wù)頁(yè)面wxml中引用wxs

   <wxs module="dateFr" src="../../../../filter/dateFr.wxs"></wxs>

   使用filter

   <text >{{dateFr.getTime(item.createdAt,':')}}</text>

結尾

wxs 基本滿(mǎn)足filter的場(chǎng)景: 共享filter場(chǎng)景 采用3 業(yè)務(wù)f(shuō)ilter很多場(chǎng)景 采用1,3 簡(jiǎn)單業(yè)務(wù)f(shuō)ilter 數據非數組型場(chǎng)景 采用2 小程序還有很長(cháng)的路要走,仍需繼續努力.