ITPub博客

首页 > IT职业 > IT职场 > 小程序中使用自定义函数

小程序中使用自定义函数

IT职场 作者:stein_ah 时间:2021-09-09 10:00:31 0 删除 编辑

我们在开发小程序的时候,会用到字符串截取、小数点保留位数等等功能,这些函数可以用JS来写。那么我们如何在小程序中写这些JS,又如何在WXML中调用它们呢。这是本章讲的中点。

一、创建公共JS文件

注意:小程序中公共JS文件一般创建在utils目录下,这样,我们就可以在每个模块页面里调用它。我这里创建了一个公共文件:common.wxs。记住:公共文件一定要是wxs后缀,否则页面无法调用。如图所示:


图片描述

1.png

二、编写相关应用函数

我们打开common.wxs文件,然后在里面编写我们常用的函数。为了说明这点,我们写了两个函数:

/**
 * 相关函数
 */var filters = {  //字符串截取
  subStrCut: function(str, len) {    return str.substring(0, len);
  },/**
 * 保留小数点位数
 */
  toFix: function(value, n) {    var num = parseFloat(value);    return num.toFixed(n);
  }
}module.exports = {  subStrCut: filters.subStrCut
}

说明:
1、定义一个整体变量,以var开头,

var 变量 = {},

这个与我们JS中定义变量是一样的。
2、编写函数。函数格式为:

函数名:function(参数) {},具体请看我写的案例

3、通过module.exports引用函数,写法如下:

module.exports = {
被使用的函数名:变量.具体函数
}

三、使用方法

函数写好了,后面就是如何使用它。
1、在使用的页面头部引入文件,引入方式是:

<wxs module="common" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../utils/common.wxs"></wxs>说明:module="文件名",我在utils文件夹里定义的文件名是common,所以这里的名称与之对应

2、函数调用

 <view class="infos">
        <view class="title">{{common.subStrCut(‘函数的初步使用’,3)}}</view>
      </view>说明:
调用方式是:common.subStrCut,其中subStrCut是上面提到的“被使用的函数名”,不要搞错啦。^_^



作者:陈楠酒肆
链接:https://www.jianshu.com/p/bf137a2ecd5b


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3356/viewspace-2815083/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: 学习面试题Day07
请登录后发表评论 登录
全部评论

注册时间:2019-08-14

  • 博文量
    100
  • 访问量
    685