微信小程序手写文件解决日期少一天且格式无法切割问题

编译环境

微信开发者工具

问题

在小程序中无法实现对日期的切割,并且可能会出现日期少一天的问题,这个问题可以由后端进行解决,也可以前端,这里用了前端新建一个wxs转换文件进行解决。

比如数据库中的数据是2024-03-02... 但是返回给前端的是2024-03-01...

第一步

utils 文件夹下新建一个文件名叫filter.wxs,这个文件主要的价值就是进行日期转换和添加1一天的操作。

添加内容

c 复制代码
function addOneDay(dateStr) {
  var parts = dateStr.split('-');
  var year = parseInt(parts[0], 10);
  var month = parseInt(parts[1], 10);
  var day = parseInt(parts[2], 10);

  day += 1;

  var daysInMonth = getDaysInMonth(year, month);
  if (day > daysInMonth) {
    day = 1;
    month += 1;
    if (month > 12) {
      month = 1;
      year += 1;
    }
  }

  return formatYearMonthDay(year, month, day);
}

function getDaysInMonth(year, month) {
  switch (month) {
    case 1: case 3: case 5: case 7: case 8: case 10: case 12:
      return 31;
    case 4: case 6: case 9: case 11:
      return 30;
    case 2:
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        return 29;
      } else {
        return 28;
      }
    default:
      return 30; 
  }
}

function formatYearMonthDay(year, month, day) {
  var monthStr = month < 10 ? '0' + month : '' + month;
  var dayStr = day < 10 ? '0' + day : '' + day;
  return year + '-' + monthStr + '-' + dayStr;
}

module.exports = {
  addOneDay: addOneDay
}

在wxml文件中引入这个文件

c 复制代码
<wxs module="filter" src="/utils/filter.wxs"></wxs>

使用

c 复制代码
<text>日期: {{filter.addOneDay(ldate)}}</text>

解决,如果有兴趣看点解决问题的过程,请往下看

详解代码

在上述文件中我们创建了三个函数,第一个函数add主要是用户对日期的添加,因为微信开发者工具不允许使用部分date函数,这里我们用到的是parseInt来进行切割,并且考虑到了年初和闰月的问题,最后调用一个日期格式化的函数。返回的就是添加一天且日期格式化的函数。但是格式是yyyy-mm-dd,如果想要别的格式的朋友也自行切割添加即可。

相关推荐
WangHappy2 小时前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端7 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker1 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker1 天前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
大米饭消灭者4 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
FliPPeDround5 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround5 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
吴声子夜歌5 天前
小程序——布局示例
小程序
码云数智-大飞5 天前
如何创建自己的小程序,码云数智与有赞平台对比
微信小程序
luffy54595 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序