微信小程序,数据过滤(filter)的实现

吴子兰
• 阅读 2149

因为微信小程序的wxml和js的内部实现机制是分开编译的。所以在wxml是没办法调用js的函数的。这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据进行格式化处理。比如我们从后端获取到一个包含了时间戳数据的数组,然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式,在Vue, Angular之类的前端Web框架中,一般在视图层都提供了如filter之类相应比较好用的方案。vue是没有这些方法的。但是小程序推出了wxs类型文件就是解决这类问题的。

使用

首先新建filter.wxs文件(也可以直接写在wxml文件中,但是这中公共方法还是应该单独建文件的)。

var formatDate = function (timestamp,option) {
  var date = getDate(parseInt(timestamp));
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = function(){
    if (date.getHours()<10){  //补‘0’
      return '0' + date.getHours()
    }
    return date.getHours();
  }
  var minute = function () {
    if (date.getMinutes() < 10) {
      return '0' + date.getMinutes()
    }
    return date.getMinutes();
  }
  var second = function () {
    if (date.getSeconds() < 10) {
      return '0' + date.getSeconds()
    }
    return date.getSeconds();
  }

  if (option=='notime'){  //不需要时间
    return year + '-' + month + '-' + day;
  }

  return year + '-' + month + '-' + day + ' ' + hour() + ':' + minute() + ":" + second();
}

module.exports = {
  formatDate: formatDate,
};

在wxml文件中使用

<wxs src='filter.wxs' module='filter' />
  <view>日期:{{filter.formatDate(要过滤的时间戳)}}</view>

注意事项

wxs是不同于js文件的。所以很多js的api是不支持的。具体支持看官方文档

点赞
收藏
评论区
推荐文章
小森森 小森森
2年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
胡哥有话说 胡哥有话说
4年前
喜大普奔,微信终于支持外网打开小程序啦!
前言千呼万唤始出来,微信小程序终于支持以URLScheme的形式从外部唤起了。longlongago我们只能在微信内的网页中使用微信开发标签小程序跳转按钮
CuterCorley CuterCorley
4年前
uni-app入门教程(7)第三方登录和分享
前言本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uniapp实现有不同的接口和实现方式。一、通用配置因为小程序和APP登录接口不同,需要在前端进行跨端兼容处理,同时微信等平台的小程序一般只支持所属宿主程序的第三方登录,而无法包括其他的
Easter79 Easter79
3年前
taro小程序展示富文本
在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果,taro小程序官方也给出了示例,地址(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2FNervJS%2Ftarocomponentstest%2Fblob%2Fmaster%2F
梦
4年前
微信小程序wxml使用substring
首先创建subutils.wxs文件varsubfunction(val,start0,end17){if(val.length0||valundefined){return}if(val.lengthend){returnval.substring(start
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
Stella981 Stella981
3年前
JavaScript数组索引检测中的数据类型问题
之前在写微信小程序项目时,里面有一个“城市选择”的功能,笔者用的是<pickerview组件,这个组件比较特别,因为它的value属性规定是数组格式的。比如:value"1"。因为当时对JS变量类型转换的不了解,笔者在代码中写下了这样的几行判断:(这是严谨的)letval_onetypeoft
吴子兰
吴子兰
Lv1
不期望被谁拯救,我们一起上岸。
文章
4
粉丝
0
获赞
0