手记

小程序中使用自定义函数

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


0人推荐
随时随地看视频
慕课网APP