本文介绍如何在微信小程序中将公共函数提取到util.js文件中,并通过module.exports和require实现模块化调用。通过具体示例展示工具函数的定义、导出及在页面JS中的引入与使用,帮助开发者提升代码复用性。
微信小程序提取公共函数至util.js的方法
本文详细介绍如何在微信小程序中将公共函数提取到util.js文件中,并提供具体使用示例,供开发者参考。
在小程序开发中,若需在其他子页面调用工具文件utils中的JS方法或变量,需遵循两个步骤:
第一步:在utils被调用的JS文件中,采用面向对象的方式导出模块:
module.exports={要调用的函数名称:要调用的函数名称 };
第二步:在需要调用的JS文件中,通过模块化方式引入utils的JS文件:
var object=require("utils被调用的js文件地址")
可通过输出object来验证被调用的方法是否成功加载;
具体示例如下:
utils中被调用的JS文件内容:
var URl='http://123.23.169';
var getImageurl=function(imageurl){
return URl+imageurl;
}
// 要引用这个文件的函数或者变量,除了在要引用的的js文件中模块化之外(var utils=require('js地址')),
// 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下:
module.exports={
URl:URl,//要引用的函数 xx:xx
getImageurl:getImageurl
}
调用该工具的JS文件内容:
// 获得工具utils工具js里面函数,先模块化引用utils里面的js地址 reqiure('js地址')成一个面向对象
var utils=require('../../utils/app.js')
// console.log(utils) 可查看获得的函数
console.log(utils.getImageurl('iamgeaaddress.png'))
最终输出结果:

工具库的创建与使用规范
补充说明:工具库的创建与使用规范
首先创建一个common文件夹
在common文件夹内创建一个utils文件夹
在utils文件夹中创建util.js文件
// 工具
function tool() {
console.log('i am a tool function.');
}
module.exports = {
tool: tool
}
在具体的页面JS文件中进行调用
首先需要引入工具文件
const util = require('../../common/utils/util');
然后在具体业务逻辑位置直接使用即可。
onLoad: function (options) {
util.tool();
...
}
i am a tool function.
这种做法类似于PHP中的common.php,其中包含大量通用函数库。无论是前端还是后端开发,其核心思想是相通的。
希望本文所述内容对微信小程序开发有所帮助。