uniapp 工具类方法封装 v1.0.0

1. 工具类封装思路

---

无论是前端开发者还是后端开发者，都会在项目中封装一些经常使用的功能方法，可以大大提高我们的开发效率

工具类的封装重要性就不多说，本文提供一个在 uniapp 项目中封装方法的一种思路，最终代码结构在文章的最后

2. 工具类封装示例

---

创建 utils/tools.js

export default {
	/**
	 * 消息提示框，支持页面跳转
	 */
	toast (options, navigate) {
		let { icon, mask, duration, title } = options
		icon = icon || 'none'
		mask = mask || true
		duration = duration || 1500
		title = typeof options === 'string' ? options : title
		// 消息提示
		uni.showToast({ icon, mask, duration, title })
		// 页面跳转
		if (typeof navigate === 'function') {
			setTimeout(() => navigate(), duration)
		} else if (typeof navigate === 'object') {
			const { url, type = 1 } = navigate
			setTimeout(() => {
				if (type == 1) {
					uni.navigateTo({ url })
				} else if (type == 2) {
					uni.redirectTo({ url })
				}
			}, duration)
		}
	},
	/**
	 * 显示加载动画
	 */
	loading(options) {
		let { mask, title } = options
		mask = mask || true
		title = typeof options === 'string' ? options : title
		uni.showLoading({ mask, title })
	},
	/**
	 * 隐藏加载动画，支持页面跳转
	 */
	hideLoading (options, navigate) {
		uni.hideLoading()
		this.toast(options, navigate)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在 uniapp 的入口文件 main.js 中，将封装的方法挂载到 uni 上

// main.js 默认代码
import App from './App'
// 下面是新增的代码(可以放在导入App的后面)
import tools from './utils/tools';
uni.$tools = tools;
1
2
3
4
5

那么，我们将页面或组件的 js 中，可以直接使用封装的方法

// 消息提示
uni.$tools.toast('修改成功')
uni.$tools.toast({
	icon: 'success',
	title: '提交成功'
})
// 消息提示后进行页面跳转
uni.$tools.toast({
	icon: 'success',
	title: '提交成功',
	duration: 3000,
}, { url: '/pages/scan/scan' })

// 显示加载动画
uni.$tools.loading('上传中')
// 关闭加载动画，并且弹出提示框，然后跳转页面
setTimeout(() => {
	uni.$tools.hideLoading('上传成功', { url: '/pages/scan/scan' })
}, 3000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 多个工具类封装

---

当前有多个工具类方法文件时

比如 : utils/tools.js 常用方法封装、utils/cache.js 数据缓存方法封装，基于上面的代码调整内容如下:

utils/tools.js

// 挂载到 uni 上的属性名
export const alias = '$t'
export default {
	toast(){},
	loading(){},
}
1
2
3
4
5
6

utils/cache.js

// 挂载到 uni 上的属性名
export const alias = '$c'
export default {
	set(){},
	get(){},
	remove(){},
}
1
2
3
4
5
6
7

创建 utils/index.js 工具类入口文件，在该文件中将工具类文件挂载到 uni 上

const files = require.context("./", false, /\.js$/);
files.keys().forEach(key => {
	if (key !== './index.js') {
		const { alias, default: utils } = files(key)
		uni[alias || ('$' + key.match(/^\.\/(.+)\.js$/)[1])] = utils
	}
})
1
2
3
4
5
6
7

在 main.js 中导入工具类入口文件即可

require('./utils')
1

4. 最终代码结构示例

---

下面是工具类封装的最终代码目录结构，是我目前使用的封装方式，后续如果有更好的方式会更新

uniapp            项目根目录
├─utils           应用目录
│  ├─index.js     工具类入口
│  ├─tools.js     常用功能方法
│  ├─cache.js     缓存相关方法
1
2
3
4
5

在 main.js 文件中使用 require 导入工具类即可，可以放在导入 App 之后

import App from "./App"
// 工具类
require('./utils')
1
2
3

utils 目录下的文件内容:

utils/index.js:

// +----------------------------------------------------------------------
// | 工具类入口文件, 在 main.js 导入即可
// +----------------------------------------------------------------------
// | 遍历当前目录下的所有 js 文件, 将工具类挂载到 uni
// +----------------------------------------------------------------------

const files = require.context("./", false, /\.js$/)

files.keys().forEach(key => {
	if (key !== "./index.js") {
		const { alias, default: utils } = files(key)
		uni[alias || ("$" + key.match(/^\.\/(.+)\.js$/)[1])] = utils
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

utils/tool.js 和 utils/cache.js 使用默认导出一个对象即可，代码示例:

通过分析 utils/index.js 文件可知:

使用工具类文件导出的 alias 为挂载到 uni 上的属性名，当没有 alias 时，默认使用工具类文件的名称作为属性名

// +----------------------------------------------------------------------
// | 调用方式: uni.$t.方法名称(参数)
// +----------------------------------------------------------------------
// | toast 消息提示框，支持页面跳转
// +----------------------------------------------------------------------
// | loading 显示加载动画
// +----------------------------------------------------------------------
// | hideLoading 隐藏加载动画，支持页面跳转
// +----------------------------------------------------------------------

// 挂载到 uni 的属性名
export const alias = '$t'

export default  {
	/**
	 * 消息提示框，支持页面跳转
	 */
	toast (options, navigate) {},
	/**
	 * 页面跳转
	 */
	goPage(url, type = 1) {},
	/**
	 * 显示加载动画
	 */
	loading(options) {},
	/**
	 * 隐藏加载动画，支持页面跳转
	 */
	hideLoading (options, navigate) {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31