微信小程序将公共函数提取至util.js的方法与示例

作者:小括号时间:2026-10-22 20:12:15浏览:131

本文介绍如何在微信小程序中将公共函数提取到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'))

最终输出结果:

微信小程序提取公共函数至util.js的方法

工具库的创建与使用规范

补充说明:工具库的创建与使用规范

首先创建一个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,其中包含大量通用函数库。无论是前端还是后端开发,其核心思想是相通的。

希望本文所述内容对微信小程序开发有所帮助。

作者最新文章