当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序数据过滤(filter)方法

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

2018-09-13 10:42 来源: 霸界科技

摘要:因为微信小程序的wxml和js的内部实现机制是分开编译的。所以在wxml是没办法调用js的函数的。这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据进行格式化处理。...

期权保本理财
  因为微信小程序的wxml和js的内部实现机制是分开编译的。所以在wxml是没办法调用js的函数的。这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据进行格式化处理。比如我们从后端获取到一个包含了时间戳数据的数组,然后需要在界面上把这些日期都格式化显示为2017-01-01这种格式的日期形式,在Vue, Angular之类的前端Web框架中,一般在视图层都提供了如filter之类相应比较好用的方案。vue是没有这些方法的。但是小程序推出了wxs类型文件就是解决这类问题的。
 
微信小程序数据过滤(filter)方法
 
  使用
 
  首先新建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是不支持的。具体支持看官方文档。
 
  例如本来获取日期,我们原本是调用new Date()的。在wxs是不支持的,但是小程序提供了一个全局函数getDate()代替。
 
  还有,wxs不支持任何ES6的语法。什么let,Map()都用不了(OS:真是low啊-_-!)。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088