在微信小程序wxml文件调用函数实现时间转换---使用wxs模块实现

1. 创建 WXS 模块文件(推荐单独存放)

在项目目录下新建 utils.wxs 文件,编写时间转换逻辑:

js 复制代码
// utils.wxs
module.exports = {
  // 将毫秒转换为分钟(保留1位小数)
  convertToMinutes: function(ms) {
    if (typeof ms !== 'number') return '0.0'
    return (Math.round(ms / 60000 * 10) / 10).toFixed(1)
  },

  // 将秒转换为分钟(保留1位小数)
  convertSecondsToMinutes: function(seconds) {
    if (typeof seconds !== 'number') return '0.0'
    return (Math.round(seconds / 60 * 10) / 10).toFixed(1)
  }
}

2. 在 WXML 中引入 WXS 模块

在需要使用的 WXML 文件中,通过 标签引入模块:

js 复制代码
<!-- 页面.wxml -->
<wxs src="../../utils.wxs" module="timeUtils" />

<!-- 示例:显示转换结果 -->
<view>
  <!-- 转换毫秒(如 90000ms = 1.5分钟) -->
  <text>90000ms = {{timeUtils.convertToMinutes(90000)}}分钟</text>
  
  <!-- 转换秒(如 150秒 = 2.5分钟) -->
  <text>150秒 = {{timeUtils.convertSecondsToMinutes(150)}}分钟</text>
</view>

3. 直接内联 WXS 代码(可选)

如果不想单独创建文件,也可以直接在 WXML 中内联 WXS:

js 复制代码
<wxs module="timeUtils">
  module.exports = {
    convertToMinutes: function(ms) {
      if (typeof ms !== 'number') return '0.0'
      return (Math.round(ms / 60000 * 10) / 10).toFixed(1)
    }
  }
</wxs>

<!-- 调用方式相同 -->
<text>{{timeUtils.convertToMinutes(120000)}}</text>

4. 动态数据绑定(结合 JS)

如果需要转换动态数据,在 Page 的 JS 中定义数据,通过 {{}} 绑定:

js 复制代码
// 页面.js
Page({
  data: {
    durationMs: 90000, // 毫秒
    durationSec: 150   // 秒
  }
})
html 复制代码
<!-- 页面.wxml -->
<text>动态毫秒值:{{timeUtils.convertToMinutes(durationMs)}}分钟</text>
<text>动态秒值:{{timeUtils.convertSecondsToMinutes(durationSec)}}分钟</text>
相关推荐
!win !3 小时前
uni-app支付宝端彻底禁掉下拉刷新效果
前端·小程序·uni-app
软希网分享源码8 小时前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码
说私域16 小时前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO17 小时前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)19 小时前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
lumi.1 天前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
weixin_177297220691 天前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀
毕设源码-赖学姐1 天前
【开题答辩全过程】以 基于Springboot+微信小程序的网上家教预约系统的设计与实现-开题为例,包含答辩的问题和答案
spring boot·后端·微信小程序
weixin_177297220691 天前
扭蛋机小程序系统开发:连接线上线下娱乐的新桥梁
小程序·娱乐·扭蛋机·盲盒
毕设源码-赖学姐1 天前
【开题答辩全过程】以 交通管理乱停车小程序的设计与实现为例,包含答辩的问题和答案
小程序