经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序wxs日期时间处理的实现示例
来源:jb51  时间:2021/7/21 20:21:10  对本文有异议

WXS(WeiXin Script)是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。其中包括了很多日常使用的javascript函数,在wxs中都是不能同样使用的。最近在做一个列表的时候,涉及到时间格式化操作。就遇到了这个问题,以前写好了的格式化工具函数直接拷贝到小程序项目的wxs文件中,函数不能正常执行。其中包括了下面的几个错误

  • 正则表达式在字符串的replace函数中的使用方法不一样,不能直接使用var a = /[0-9]/这种方式声明使用。正确的方式为var reg = getRegExp("-", “g”);
  • 获取当前时间不能通过new Date()获取,而是通过getDate方法获取。
  • getDate(‘2018/12/12')可以获取对应日期的date类型的时间。

1、时间戳转日期

在wxs中处理日期需要使用getDate(time),而不能使用new Date()来处理日期

在wxs文件中

  1. var filter = {
  2. formatNumber: function (n) {
  3. n = n.toString()
  4. return n[1] ? n : '0' + n
  5. },
  6. parseTime: function (time, type) {
  7. if (time == null || type == '') {
  8. return ''
  9. }
  10. if (arguments.length === 0) {
  11. return null
  12. }
  13. var date = getDate(time);//在wxs中不能使用new Date()来处理日期
  14. console.log("date", date);
  15. var y = date.getFullYear();
  16. var m = filter.formatNumber(date.getMonth() + 1);
  17. var d = filter.formatNumber(date.getDate());
  18. var h = filter.formatNumber(date.getHours());
  19. var i = filter.formatNumber(date.getMinutes());
  20. var s = filter.formatNumber(date.getSeconds());
  21. var a = filter.formatNumber(date.getDay());
  22. var time_str = "";
  23. if (type == 'month') {
  24. time_str = y + '-' + m;
  25. } else if (type == 'date') {
  26. time_str = y + '-' + m + '-' + d;
  27. } else if (type == 'datetime') {
  28. time_str = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
  29. } else if (type == 'onlyMonth') {
  30. time_str = m;
  31. } else if (type == 'onlyYear') {
  32. time_str = y;
  33. }
  34. return time_str
  35. },
  36. }
  37. module.exports = {
  38. parseTime: filter.parseTime,
  39. }

在wxml中使用

  1. <wxs module="filters" src="../../../filters/filter.wxs"></wxs>
  2. <text>{{filters.parseTime(time,'date')}}</text>

2、UTC转北京时间

UTC时间比北京时间晚8小时,在苹果手机上需要去除"Z"后再处理时间

  1. var filter = {
  2. formatNumber: function (n) {
  3. n = n.toString()
  4. return n[1] ? n : '0' + n
  5. },
  6. parseTime: function (time, type) {
  7. if (time == null || time == '') {
  8. return ''
  9. }
  10. if (arguments.length === 0) {
  11. return null
  12. }
  13. var date;
  14. if (typeof time === 'object') {
  15. date = time
  16. } else {
  17. if (('' + time).length === 10) {
  18. time = parseInt(time) * 1000
  19. } else {
  20. time = time.replace("Z", " ").replace(getRegExp('-', 'g'), "/")//去除Z,兼容苹果手机
  21. var ts = time.split('T')
  22. var t1 = ts[0]
  23. var t2 = ts[1].split('.')[0]
  24. time = t1 + " " + t2
  25. time = getDate(time).getTime() + 8 * 3600000;//utc时间与北京时间相差8小时
  26. }
  27. date = getDate(time)//不能使用new Date()
  28. }
  29. var y = date.getFullYear();
  30. var m = filter.formatNumber(date.getMonth() + 1);
  31. var d = filter.formatNumber(date.getDate());
  32. var h = filter.formatNumber(date.getHours());
  33. var i = filter.formatNumber(date.getMinutes());
  34. var s = filter.formatNumber(date.getSeconds());
  35. var a = filter.formatNumber(date.getDay());
  36. var time_str = "";
  37. if (type == 'month') {
  38. time_str = y + '-' + m;
  39. } else if (type == 'date') {
  40. time_str = y + '-' + m + '-' + d;
  41. } else if (type == 'datetime') {
  42. time_str = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
  43. } else if (type == 'onlyMonth') {
  44. time_str = m;
  45. } else if (type == 'onlyYear') {
  46. time_str = y;
  47. }
  48. return time_str
  49. },
  50. }
  51. module.exports = {
  52. parseTime: filter.parseTime,
  53. }

到此这篇关于微信小程序 wxs日期时间处理的实现示例的文章就介绍到这了,更多相关小程序 wxs日期时间内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号