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

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

  1. 首先我们建立共享filter文件夹,实现一个日期格式化

  1. 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
    }
  2. 在业务页面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
小程序还有很长的路要走,仍需继续努力.

微信小程序 使用filter过滤器几种方式的更多相关文章

  1. 微信小程序 - 传参的几种方式

    1. navigator navigator?第一参数&第二参数 .... 在传递页面的options可以拿到传递过来的参数 <navigator url='start-test/sta ...

  2. 微信小程序回到顶部的两种方式

    一,使用view形式的回到顶部 <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bin ...

  3. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  4. 微信小程序传参数的几种方法

    1,navigator 跳转时 wxml页面(参数多时可用“&”) <navigator url='../index/index?id=1&name=aaa'></n ...

  5. 微信小程序里使用过滤器

    新建一个 filter.wxs文件 function formatString(val, len) { if (val.length > len) { return val.substring( ...

  6. 智能小程序关于Filter过滤器的简单使用

    <filter module="swan"> export default { imgurl: (imgUrl) => { var imgurlprefix = ...

  7. 微信小程序 - setData:key的几种用法

    1. 常量key渲染   2. 变量key渲染(字符串和变量先拼接) 3.对象key渲染

  8. 微信小程序使用函数的三种方法

    使用来自不同页面的函数 函数写在util.js页面 function formatTime(date) { var year = date.getFullYear() var month = date ...

  9. 盘点微信小程序跨页面传值的若干方式

    直接给大家上干货 1.跳转页面传递参数 pageA.wxml <button type="primary" bindtap="jumpTo">点击跳 ...

随机推荐

  1. 爬虫之爬取豆瓣top250电影排行榜及爬取斗图啦表情包解读及爬虫知识点补充

    今日内容概要 如何将爬取的数据直接导入Excel表格 #如何通过Python代码操作Excel表格 #前戏 import requests import time from openpyxl impo ...

  2. mataplotlib篇(开篇)

    今日内容概要 matplotlib画各种图形 数据操作补充 数据清洗 网络爬虫 今日内容详细 matplotlib画各种图形 # 首先导入模块 import numpy as np import pa ...

  3. 微服务从代码到k8s部署应有尽有系列(十一、日志收集)

    我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 整个项目使用了go-zero开发的微服务,基本包含了go-zero以及相关go-zero作者开发的一些中 ...

  4. webpack--性能优化之打包构建速度和代码调试优化

    前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...

  5. LGP7847题解

    题意:给定 \(n\),求方程 \(\frac 1 a - \frac 1 b=\frac 1 n\) 的所有解,且解必须满足 \(\gcd(a,b,n)=1\). 以下内容搬运自官方题解: 转化一下 ...

  6. git使用命令行保留原分支迁移代码仓库

    有些时候我们需要对git仓库中的项目进行一些迁移,如从a账号迁移到b账号下,从github平台迁移到内部的gitlab平台等.一般平台会自带 migrate 或者 import 的功能,可以很方便的进 ...

  7. hadoop-SSH免密登录配置

    一:配置基础环境 一.修改主机名 修改 master 机器主机名 [root@server ~]# hostnamectl set-hostname master-wzg [root@server ~ ...

  8. Mysql下载路径和安装

    下载路径 https://dev.mysql.com/downloads/mysql/ C:\Windows\system32>net start mysql 发生系统错误 2. 系统找不到指定 ...

  9. 基于selenium实现河海大学自动健康打卡

    0.每日健康打卡有点烦 1.所用方法:selenium:需要下载响应浏览器的webdriver 2.注意事项,我感觉唯一要注意的就是页面跳转以后应该怎么操作了(那个时候困扰了我好几天) 3.相应代码: ...

  10. 在微信小程序中使用 echarts 图片-例 折线图

    首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...