脚本宝典收集整理的这篇文章主要介绍了

微信小程序数据过滤(filter)方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

因为微信小程序的wxml和js的内部实现机制是分开编译的。所以在wxml是没办法调用js的函数的。这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据做一些特殊处理。比如我们从后端获取到一个时间戳,然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式,在Vue, Angular之类的前端Web框架中,提供了如filter之类相应比较好用的方案。小程序是没有这些方法的。但是最近小程序推出了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){  //补‘0return '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是不支持的。具体支持看官方文档
例如本来获取日期,我们原本是调用new Date()的。在wxs是不支持的,但是小程序提供了一个全局函数getDate()代替。
还有,wxs不支持任何ES6的语法。什么letMap()都用不了(OS:真是low啊-_-!)。

总结

以上是脚本宝典为你收集整理的

微信小程序数据过滤(filter)方法

全部内容,希望文章能够帮你解决

微信小程序数据过滤(filter)方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过