网站首页> 前端开发> JavaScript> uniapp 工具类方法封装

uniapp 工具类方法封装

时间:2022-10-17 13:58:01 阅读:798次 来源:互联网

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) {}
}


本文地址:https://www.manongw.com/article/422.html

文章来源:转载于梁臣洋个人博客,转载网址为https://www.itqaq.com/index/465.html

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59