美文网首页
小程序:(微信小程序)小程序中使用自定义函数

小程序:(微信小程序)小程序中使用自定义函数

作者: wildelegant | 来源:发表于2020-03-03 19:23 被阅读0次

    我们在开发微信小程序的时候,会用到自定义的函数功能,那么我们如何在小程序中写这些JS,又如何在WXML中调用它们呢 ?换句话说在微信小程序{{}}中直接调用自定义的函数

    详细见微信小程序的API:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

    本文以一个小的例子予以说明:

    一、创建公共的JS文件

    本着代码的规范化和项目的工程化,小程序中公共JS文件一般创建在utils目录下,这样,我们就可以在每个模块页面里调用它。比如:这里创建了一个公共文件:time.wxs(PS:微信小程序的公共文件一定要是wxs后缀),如图所示:

    在utils公共文件目录下新建wxs文件

    二、编写相关应用函数

    打开time.wxs文件,然后在里面编写函数

    /**
    * 时间格式化:年月日是分秒
    * @param {*} timestamp :时间戳13位
    * @param {*} type:需要转化后的时间格式
    * eg. cn: 2020年3月02日 ; en:2020.03.02
    */
    
    var timeFormat = {
        timestampToTime: function (timestamp, type) {
            if (timestamp && type === 'cn') {
                var date = getDate(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '年';
                var M = (date.getMonth() + 1 < 10 ? (date.getMonth() + 1) : date.getMonth() + 1) + '月';
                var D = date.getDate() + '日';
                var h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
                var m = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
                var s = date.getSeconds();
    
                return M + D + h + m;
            }
    
            if (timestamp && type === 'en') {
                var date = getDate(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
                 var Y = date.getFullYear() + '.';
                 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
                 var D = date.getDate() + '';
                 var h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
                 var m = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
                var  s = date.getSeconds();
    
                return Y + M + D;
            }
        }
    };
    
    // 导出对外暴露的属性
    module.exports = {
        timestampToTime: timeFormat.timestampToTime
    }
    

    说明:

    1 定义一个整体变量,以var开头,
          var 变量 = {};*
    2、编写函数。函数格式为:
          函数名:**function**(**参数**) **{**},具体参见上面的例子*
    3、通过module.exports引用函数,写法如下:
          module.exports={被使用的函数名:变量.具体函数}*
    

    其他说明:

    WXS 中不能调用 javascript 中定义的函数或者变量,也不能调用小程序提供的API,他的运行环境和 javascript 是隔离的。
    只能使用 var 来定义变量,表现形式和 javascript 一样,会有变量提升。
    所以在上例中不能使用 new Date() ( var date =new Date(timestamp);) 应该使用getDate(),即获取当前日期使用getDate(),使用var声明变量
    

    三、如何试用

    1、在使用的页面头部引入文件,引入方式是:

    <wxs module="time" src="../../utils/time.wxs"></wxs>
    

    说明:module="文件名",我在utils文件夹里定义的文件名是time,所以这里的名称与之对应
    2、函数调用

    <view class="msg">{{time.timestampToTime(item.endTime, "cn")}}我在这里执行自定义函数</view>
    

    相关文章

      网友评论

          本文标题:小程序:(微信小程序)小程序中使用自定义函数

          本文链接:https://www.haomeiwen.com/subject/hzvklhtx.html