uniapp 工具类方法封装
2024-09-29
13
1. 工具类封装思路
2. 工具类封装示例
3. 多个工具类封装
4. 最终代码结构示例
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) }}
在 uniapp 的入口文件 main.js
中,将封装的方法挂载到 uni
上
// main.js 默认代码import App from './App'// 下面是新增的代码(可以放在导入App的后面)import tools from './utils/tools';uni.$tools = tools;
那么,我们将页面或组件的 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)
3. 多个工具类封装
当前有多个工具类方法文件时
比如 : utils/tools.js
常用方法封装、utils/cache.js
数据缓存方法封装,基于上面的代码调整内容如下:
utils/tools.js
// 挂载到 uni 上的属性名export const alias = '$t'export default { toast(){}, loading(){},}
utils/cache.js
// 挂载到 uni 上的属性名export const alias = '$c'export default { set(){}, get(){}, remove(){},}
创建 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 }})
在 main.js 中导入工具类入口文件即可
require('./utils')
4. 最终代码结构示例
下面是工具类封装的最终代码目录结构,是我目前使用的封装方式,后续如果有更好的方式会更新
uniapp 项目根目录├─utils 应用目录│ ├─index.js 工具类入口│ ├─tools.js 常用功能方法│ ├─cache.js 缓存相关方法
在 main.js
文件中使用 require
导入工具类即可,可以放在导入 App
之后
import App from "./App"// 工具类require('./utils')
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 }})
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) {}}
更新于:10天前赞一波!
相关文章
- 【说站】python shutil有哪些操作文件的方法
- 【说站】java泛型方法的使用注意
- 【说站】java泛型方法的特征
- iOS 图片压缩方法的示例代码
- Laravel扩展推荐:导航元素工具“Laravel Navigation”
- thinkphp怎么用u方法?ThinkPHP中U方法的使用浅析
- thinkphp怎么用model?ThinkPHP中实例Model方法的区别说明
- thinkPHP简单调用函数与类库的方法
- 程序员开发人员常用工具和网站
- uniapp 中 vuex 的使用
- HTTP请求方法(HTTP Request Method)
- JS 的 apply 方法
- JS 数组去重的多种方法
- uniapp 国际化开发指南【多语言】
- JS 数组方法 every 和 some 的区别
- uniapp 返回上一级页面并触发指定方法
- uniapp 网络请求封装【luch-request 3.x】
- JS 正则表达式常用方法
- uniapp 项目打包安卓 App
- uniapp 中的生命周期函数
文章评论
评论问答