UNIAPP如何自定义全局方法？

雪山上的小灰熊2025-09-28 9:54

最近再写uniapp的时候，发现工作中有些小伙伴对于如何定义一些全局方法不是很清楚，无法清晰地去封装和完善公共方法，这里简单的介绍一下

技术栈：uniapp + vue3 + vite + ts(typescript)

一定义一个简单的hooks

1、什么是hook（钩子机制，钩子函数）？

在JavaScript和前端开发中，Hooks通常与React框架中的Hooks概念相关联，但在其他框架或环境中，我们可以通过其他方式模拟或实现类似的功能。

钩子函数一般是一种再特定时间或者函数执行前后插入的自定义代码的技术，允许扩展或者修改原有的程序的行为

包括：函数修改、状态管理，事件拦截等

比如：使用uniapp去二次封装一个全局的提示 hooks/useToast.ts

TypeScript 复制代码

const defaultToastOpts: UniApp.ShowToastOptions = {
  icon: 'none',
  mask: true,
  duration: 1500,
}

export const useCommon  = () => {
	const Toast = (arg: string | UniApp.ShowToastOptions) => {
		if (typeof arg === 'string') { 
			uni.showToast({ title: arg })
		} else {
			const opts: object = {
			    title: arg.title,
			    ...defaultToastOpts,
			    ...arg,
			}
			return uni.showToast(opts)
		}
	}
	
	Toast.loading = () => uni.showToast({ icon: 'loading', duration: 120000, mask: true         })
	Toast.clear = () => uni.hideToast()
	
	
	return {
		Toast
	}
}

二、定义全局引入的函数

/types/auto-import.d.ts

TypeScript 复制代码

export {}
declare global {
    ...
    const useCommon: typeof import('../hooks/useToast')['useToast']
    ...
}

import { UnwrapRef } from 'vue'
declare module 'vue' {
    ...
    readonly useCommon: UnwrapRef<typeof import('../hooks/useToast')['useToast']>
    ...
}

三、如何配置自定引入

vite.config.ts

TypeScript 复制代码

import uni from "@dcloudio/vite-plugin-uni";
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    ...
	plugins: [
		uni(),
        AutoImport({
		    imports: ['vue', 'uni-app'],
		    dts: 'src/types/auto-import.d.ts',
		    dirs: ['src/hooks'], // 自动导入 hooks
		    eslintrc: { enabled: true },
		    vueTemplate: true, // default false
		}),
    ]
    ...
})

四、如何结合场景使用？

TypeScript 复制代码

<script setup lang="ts">
    const { Toast } = useToast()
    onMounted(() => {
        Toast('这是一个提示')
        Toast.loadin()
        setTimeout(() => {
            Toast.clear()
        }, 2000)
    })
</script>

总结：简简单单实现，有时候代码并不是很多，也能实现一个小功能。

个人的一点小想法，请多多指教！！！