小程序utils的使用简介

本文介绍如何在项目中利用模块化编程提升代码复用率。通过使用utils/util.js作为示例,讲解了如何创建和导入模块,以及如何通过module.exports或exports暴露模块接口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们通过开发者工具快速创建了一个 QuickStart 项目。你可以留意到这个项目里边生成了一个utils/util.js
这里写图片描述

可以将一些公共的代码抽离成为一个单独的 js (utils.js)文件,作为一个模块;
模块只有通过 module.exports 或者 exports 才能对外暴露接口。
所以当你在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者 exports 对外暴露

module.exports = {
  formatTime: formatTime,
  '对外方法名':'本地方法名'
}

如何在需要使用这些模块的文件中使用:使用 require(path) 将公共代码引入

//util.js
function sayHello(name) {
    console.log(`Hello ${name} !`)
}
module.exports = {
    sayHello: sayHello
}
var util= require('../../utils/util.js')
Page({
     data:[],
      onLoad: function() {
        console.log(util.sayHello('Cc'))
    },
})

tip: require 暂时不支持绝对路径

### 微信小程序 `utils` 文件的使用说明 在微信小程序开发中,`utils` 是一个常见的目录名称,用于存放通用的功能函数或工具类代码。这些工具函数可以被多个页面或模块调用,从而提高代码的复用性可维护性。 #### 1. **创建 `utils` 工具文件** 通常会在项目的根目录下创建一个名为 `utils` 的文件夹,在其中定义各种辅助方法。例如: ```javascript // utils/util.js function formatTime(date) { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') } function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n } module.exports = { formatTime: formatTime, } ``` 上述代码片段展示了如何在一个 `util.js` 文件中定义时间格式化的方法,并将其导出以便其他模块使用[^1]。 --- #### 2. **导入并使用 `utils` 模块** 在需要使用的页面或其他模块中,可以通过 `require()` 方法引入该工具文件中的功能。例如: ```javascript // pages/index/index.js const util = require('../../utils/util'); Page({ data: { currentTime: '' }, onLoad() { this.setData({ currentTime: util.formatTime(new Date()) // 调用 utils 中的时间格式化方法 }); } }) ``` 此示例演示了如何在页面加载时获取当前时间并通过 `formatTime` 函数对其进行格式化处理。 --- #### 3. **扩展:结合 MD5 加密功能** 如果希望在 `utils` 文件中加入更多复杂逻辑,比如 MD5 加密功能,则可以根据需求集成第三方库或者自定义算法。以下是基于引用的内容实现的一个简单例子[^3]: ```javascript // utils/md5Util.js import md5 from 'js-md5'; // 假设已安装 js-md5 库 function encryptPassword(password) { return md5(password); // 对密码进行加密 } module.exports = { encryptPassword: encryptPassword }; ``` 随后可以在登录界面或者其他场景下调用这个加密方法来保护用户的隐私数据: ```javascript // pages/login/login.js const md5Util = require('../../utils/md5Util'); Page({ onLogin(e) { const password = e.detail.value.password; const encryptedPassword = md5Util.encryptPassword(password); console.log('Encrypted Password:', encryptedPassword); wx.request({ url: 'https://example.com/api/login', method: 'POST', data: { password: encryptedPassword }, // 发送加密后的密码给服务器端验证 success(res) { console.log('Login Success', res.data); } }) } }); ``` --- #### 4. **注意事项** - 确保 `utils` 文件夹内的每个工具函数都具有单一职责原则,便于后续调试与优化。 - 如果涉及敏感操作(如加密),务必遵循安全规范,防止泄露重要信息。 - 可以利用 NPM 包管理器安装一些成熟的开源库作为补充支持,例如日期处理、字符串匹配等功能[^2]。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值