小程序中使用自定义函数

我们在开发小程序的时候，会用到字符串截取、小数点保留位数等等功能，这些函数可以用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