当前位置: 首页 > news >正文

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

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

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

// 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 文件中,通过 标签引入模块:

<!-- 页面.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:

<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
Page({data: {durationMs: 90000, // 毫秒durationSec: 150   // 秒}
})
<!-- 页面.wxml -->
<text>动态毫秒值:{{timeUtils.convertToMinutes(durationMs)}}分钟</text>
<text>动态秒值:{{timeUtils.convertSecondsToMinutes(durationSec)}}分钟</text>
http://www.lqws.cn/news/464365.html

相关文章:

  • WevServer实现:异步日志写与HTTP连接
  • Zephyr 调试实用指南:日志系统、Shell CLI 与 GDB 全面解析
  • CLion开发Qt桌面程序_git的简单使用_小团体
  • 闲庭信步使用SV搭建图像测试平台:第五课——使用task
  • pyqt logger类与界面分开
  • 从语义到推荐:大语言模型(LLM)如何驱动智能选车系统?
  • Mac电脑-Markdown编辑器-Typora
  • c++26新功能—hive容器
  • 税务 VR 虚拟体验,带来全新办税感受
  • 【软考高级系统架构论文】论NoSQL数据库技术及其应用
  • HarmonyOS 5的分布式通信矩阵是如何工作的?
  • 鸿蒙NEXT-鸿蒙三层架构搭建,嵌入HMRouter,实现便捷跳转,新手攻略。(1/3)
  • 在AI普及的大环境下神经网络在新能源汽车热管理系统中的应用简介
  • 无线Debugger攻防全解:原理剖析与突破之道
  • Qt中的布局
  • 深入浅出:Go语言中的Cookie、Session和Token认证机制
  • 关于 Kyber:抗量子密码算法 Kyber 详解
  • 首页实现多级缓存
  • 【信号与系统四】采样和通信系统
  • rent8_wechat-最常用出租屋管理系统-微信小程序
  • Mac Parallels Desktop Kali 2025 代理设置
  • 外卖之后再度进军酒旅,京东多线出击的逻辑是什么?
  • Electron 开发桌面应用概述
  • 跟着AI学习C# Day27
  • Pytorch3D 中涉及的知识点汇总
  • 【Flutter】状态管理框架Provider和Get对比分析(面试常用)
  • Python内存使用分析工具深度解析与实践指南(下篇)
  • 江科大STM32入门:DMA传输数据
  • java 找出两个json文件的不同之处
  • 神经网络中的均方误差(Mean Squared Error)详解