uniapp如何写全局函数
全局函数的定义与使用
在UniApp中定义全局函数可以通过挂载到Vue.prototype或使用模块化导出导入的方式实现。以下是两种常用方法：
方法一：挂载到Vue.prototype
在main.js中定义全局函数并挂载到Vue原型链上，所有页面和组件可通过this调用。
// main.js
import Vue from 'vue'
Vue.prototype.$globalFunc = function(params) {
console.log('全局函数调用，参数:', params)
// 函数逻辑
}组件中使用：
export default {
methods: {
callGlobalFunc() {
this.$globalFunc('测试参数')
}
}
}方法二：模块化导出与导入
将函数封装为独立模块，通过import引入使用。
1. 创建全局函数文件
// utils/globalFunctions.js
export function globalFuncA(params) {
return `处理结果: ${params}`
}
export function globalFuncB() {
// 函数逻辑
}2. 组件中按需引入
import { globalFuncA } from '@/utils/globalFunctions.js'
export default {
methods: {
useFunc() {
const result = globalFuncA('参数')
console.log(result)
}
}
}注意事项
- 命名规范：挂载到
Vue.prototype的函数建议以$开头（如$func），避免与组件属性冲突。 - this绑定：若函数内需访问组件实例，使用普通函数而非箭头函数。
- TypeScript支持：若使用TS，需扩展
Vue类型声明（在src/shims-vue.d.ts中）：declare module 'vue/types/vue' { interface Vue { $globalFunc: (params: any) => void } }
适用场景对比
| 方式 | 优点 | 缺点 |
|---|---|---|
| Vue.prototype | 调用方便，直接通过this访问 |
可能污染Vue原型链 |
| 模块化 | 按需导入，代码组织清晰 | 每次使用时需显式引入 |
