国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

godruoyi / 3316人閱讀

摘要：與之間通過橋協(xié)議通信包括調(diào)用指令和各種事件，涉及消息序列化跨線程通信與。一個小程序可以有多個，頁面間切換動畫比更流暢。業(yè)務無法直接控制。

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

需要結(jié)果的請直接看最后的WXS

View Filter

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

現(xiàn)有前端框架filter一般:

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

使用 | 作為管道符 傳遞參數(shù)進行序列化

缺陷:

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

直接修改原數(shù)據(jù)

在請求完成之后 對返回值data進行一次數(shù)據(jù)處理 比如 抽象一個_formatListData方法對 返回進行二次處理.

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

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

ES6 get 
data : {
  time : 1511748300571
}

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

通過get方法來實現(xiàn)對字段顯示過濾. 只能操作對象 對數(shù)組中的item 比較無力.

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

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

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

通過wxs 實現(xiàn)共享filter:

首先我們建立共享filter文件夾,實現(xiàn)一個日期格式化

WXS 實現(xiàn)日期格式化（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
   }

在業(yè)務頁面wxml中引用wxs

使用filter

      {{dateFr.getTime(item.createdAt,":")}}
結(jié)尾

wxs 基本滿足filter的場景:

共享filter場景 采用3
業(yè)務filter很多場景 采用1,3
簡單業(yè)務filter 數(shù)據(jù)非數(shù)組型場景 采用2
小程序還有很長的路要走,仍需繼續(xù)努力.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90127.html

相關(guān)文章

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    Carson 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    muzhuyu 評論0 收藏0

  • 當微信小程序遇上filter~

    摘要：具體用法其中表示數(shù)組元素的值，表示數(shù)組元素的下標，表示包含該元素的數(shù)組。這里采用隨機函數(shù)來獲取數(shù)組的下標，函數(shù)是獲取之間的數(shù)，函數(shù)是向下取整，這樣就可以隨機獲取相應的下標數(shù)。小程序中的模板就很好地幫我們解決了這個問題，并通過屬性來實現(xiàn)調(diào)用。 在微信小程序的開發(fā)過程中，當你想要實現(xiàn)不同頁面間的數(shù)據(jù)綁定，卻為此抓耳饒腮時，不妨讓微信小程序與filter 來一場完美的邂逅，相信會給你帶來別樣...

    Darkgel 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<