我们在开发微信小程序的时候,会用到自定义的函数功能,那么我们如何在小程序中写这些JS,又如何在WXML中调用它们呢 ?换句话说在微信小程序{{}}中直接调用自定义的函数 ?
微信小程序的API:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
一、创建公共的JS文件
本着代码的规范化和项目的工程化,小程序中公共JS文件一般创建在utils目录下,这样,我们就可以在每个模块页面里调用它。比如:这里创建了一个公共文件:time.wxs(PS:微信小程序的公共文件一定要是wxs后缀),如图所示:
二、编写相关应用函数
打开time.wxs文件,然后在里面编写函数:
1 /** 2 * 时间格式化:年月日是分秒 3 * @param {*} timestamp :时间戳13位 4 * @param {*} type:需要转化后的时间格式 5 * eg. cn: 2020年02月02日 ; en:2020.02.02 6 */ 7 var timeFormat = { 8 timestampToTime: function (timestamp, type) { 9 if (timestamp && type === ‘cn‘) { 10 let date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 11 let Y = date.getFullYear() + ‘年‘; 12 let M = (date.getMonth() + 1 < 10 ? (date.getMonth() + 1) : date.getMonth() + 1) + ‘月‘; 13 let D = date.getDate() + ‘日‘; 14 let h = date.getHours() < 10 ? ‘0‘ + (date.getHours()) + ‘:‘ : date.getHours() + ‘:‘; 15 let m = date.getMinutes() < 10 ? ‘0‘ + (date.getMinutes()) : date.getMinutes(); 16 let s = date.getSeconds(); 17 18 return M + D + h + m; 19 } 20 if (timestamp && type === ‘en‘) { 21 let date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 22 let Y = date.getFullYear() + ‘.‘; 23 let M = (date.getMonth() + 1 < 10 ? ‘0‘ + (date.getMonth() + 1) : date.getMonth() + 1) + ‘.‘; 24 let D = date.getDate() + ‘‘; 25 let h = date.getHours() < 10 ? ‘0‘ + (date.getHours()) + ‘:‘ : date.getHours() + ‘:‘; 26 let m = date.getMinutes() < 10 ? ‘0‘ + (date.getMinutes()) : date.getMinutes(); 27 let s = date.getSeconds(); 28 29 return Y + M + D; 30 } 31 } 32 }; 33 34 35 // 导出对外暴露的属性 36 module.exports = { 37 timestampToTime: timeFormat.timestampToTime 38 }
说明:
1、定义一个整体变量,以var开头,
var 变量 = {};
2、编写函数。函数格式为:
函数名:function(参数) {},具体参见上面的例子
3、通过module.exports引用函数,写法如下:
module.exports = {
被使用的函数名:变量.具体函数
}
三、如何试用
1、在使用的页面头部引入文件,引入方式是:
1 <wxs module="time" src="../../utils/time.wxs"></wxs>
说明:
module="文件名",我在utils文件夹里定义的文件名是time,所以这里的名称与之对应
2、函数调用
1 <view class="msg">{{time.timestampToTime(item.endTime, "cn")}}已开奖</view>