微信小程序使用filter过滤器几种方式

godruoyi 发布于2019-08-21 17:52 / 3160人阅读

摘要：与之间通过桥协议通信包括调用指令和各种事件，涉及消息序列化跨线程通信与。一个小程序可以有多个，页面间切换动画比更流畅。业务无法直接控制。

由于微信小程序技术生态比较闭合，导致很多现代前端框架很多积累出的成果都没有实现(可能未来会逐一实现). 用惯了现代再耍小程序总感觉很不顺手.

需要结果的请直接看最后的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

使用filter

      {{dateFr.getTime(item.createdAt,":")}}

结尾

wxs 基本满足filter的场景:

共享filter场景采用3
业务filter很多场景采用1,3
简单业务filter 数据非数组型场景采用2
小程序还有很长的路要走,仍需继续努力.

云服务器私有云微信小程序怎么使用怎样使用微信小程序如何使用微信小程序微信小程序如何在电脑上使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90127.html

前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Carson 2019-07-31 10:21 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

muzhuyu 2019-07-01 12:43 评论0 收藏0
当微信小程序遇上filter~

摘要：具体用法其中表示数组元素的值，表示数组元素的下标，表示包含该元素的数组。这里采用随机函数来获取数组的下标，函数是获取之间的数，函数是向下取整，这样就可以随机获取相应的下标数。小程序中的模板就很好地帮我们解决了这个问题，并通过属性来实现调用。在微信小程序的开发过程中，当你想要实现不同页面间的数据绑定，却为此抓耳饶腮时，不妨让微信小程序与filter 来一场完美的邂逅，相信会给你带来别样...

Darkgel 2019-08-21 18:33 评论0 收藏0