uni-app怎么封装全局方法 uni-app挂载公共函数教程【配置】

陆砚码

2026-09-12 • 👁 1人浏览过

在 uni-app 中挂载全局方法应于 main.js 中通过 Vue.prototype（Vue 2）或 app.config.globalProperties（Vue 3）实现，确保在首个实例创建前完成；需加 $ 前缀、避免 this 误用、做好跨平台兼容判断。 uni-app 里怎么挂载全局方法到

Vue.prototype

直接改

Vue.prototype

是最常用也最稳妥的方式，适用于所有 Vue 2 风格的 uni-app 项目（目前绝大多数 H5、小程序、App 端仍基于 Vue 2）。Vue 3（

@dcloudio/uni-app@next

）不支持该方式，需用

app.config.globalProperties

，但生态兼容性差，暂不推荐。实操建议：在

main.js

中创建函数后立即挂载，确保所有组件实例都能访问函数名建议加前缀（如

$toast

、

$http

），避免和原生属性或插件冲突不要在挂载函数里直接使用

this

指向组件实例——它此时是 undefined；需显式传入

vm

或用

getCurrentInstance()

（仅 Vue 3）示例：

// main.js
import Vue from 'vue'
Vue.prototype.$formatTime = function(timestamp) {
  return new Date(timestamp).toLocaleString()
}
Vue.prototype.$safeGet = function(obj, path, def = null) {
  return path.split('.').reduce((o, k) => o?.[k], obj) ?? def
}

为什么不能在

utils/

里直接 export 函数然后 import 使用能用，但不是“全局方法”的本意。用户真正需要的是“无需 import 就能在任意 .vue 文件中调用”，比如

this.$formatTime(171xxxx)

。纯工具函数要 import，每次用都得写一行，容易漏、难统一管理、IDE 提示也不如挂载后稳定。常见错误现象：在

utils/index.js

写了

export function $debounce() {...}

，但在页面里写

this.$debounce

报错：undefined 有人试图在

App.vue

的

created

里挂载，结果子组件拿不到——因为挂载时机太晚，实例已创建完毕关键点：挂载动作必须发生在 Vue 构造函数定义之后、首个实例创建之前，

main.js

是唯一可靠位置。 uni-app 编译到不同平台时，挂载的方法会失效吗不会失效，只要挂载逻辑执行了，所有平台（微信小程序、支付宝、H5、App）都生效。但要注意平台 API 差异导致函数内部出错。 uni-app电商系统实战精讲课程课件 uni-app电商系统实战精讲课程下载典型坑：在挂载的函数里直接调用

uni.downloadFile

，却没判断当前是否在小程序环境（H5 不支持），运行时报错

uni.downloadFile is not a function

用了

document.querySelector

，H5 正常，小程序编译后白屏或报

document is not defined

挂载函数里用了

require('xxx')

动态引入，但某些平台（如微信小程序）不支持 CommonJS 式 require 建议：所有跨平台函数内部必须做

uni.getSystemInfoSync().platform

或

process.env.UNI_PLATFORM

判断，或用

uni.

统一 API 替代原生 Web API。 Vue 3 版 uni-app（

@dcloudio/uni-app@next

）怎么挂载不能用

Vue.prototype

，要用

app.config.globalProperties

。但注意：这个版本目前文档少、插件兼容差、CLI 支持不稳定，多数人实际用不到。如果真在用，操作很简单：在

main.js

（或

main.ts

）里拿到

app

实例后立刻挂载函数内无法直接访问

this

，必须靠参数传入上下文，或用

getCurrentInstance()

proxy

挂载的属性在

setup()

里不可直接用

this.xxx

，要通过

getCurrentInstance().proxy.xxx

访问（不推荐）或改用组合式 API 封装示例：

// main.js（Vue 3 版）
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$log = function(msg) {
    console.log('[uni]', msg)
  }
  return {
    app
  }
}

真正麻烦的不是挂载动作本身，而是后续所有组件都要适配——尤其是已有项目升级时，

this.$xxx

在 setup 里根本不可用，必须重构成

const { proxy } = getCurrentInstance()

，这一步很容易被忽略。

相关文章