微信小程式 使用filter過濾器幾種方式

sherlock221b發表於2019-02-27
微信小程式Filter過濾器

管道.jpeg

由於微信小程式 技術生態比較閉合，導致很多 現代前端框架很多積累出的成果都沒有實現(可能未來會逐一實現). 用慣了現代 再耍小程式 總感覺很不順手.

需要結果的請直接看最後的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/question/64322737/answer/223446446

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

ps : 因為執行在不同執行緒所以 js與wxs 不能相互引用的. 這就有可能在js中使用公共方法 在wxs中需要重新寫一份(為了共享filter) 造成程式碼冗餘.

通過wxs 實現共享filter:

  1. 首先我們建立共享filter資料夾,實現一個日期格式化

    image.png

  2. 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
 }
複製程式碼

  3. 在業務頁面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 小程式還有很長的路要走,仍需繼續努力.

相關文章