全局混入须在createapp之后、mount之前注册;mixins需用export default导出函数式data,方法加前缀防冲突;onshareappmessage仅mp-weixin生效,h5需单独实现;页面级同名选项优先级高于混入。

全局混入必须在 main.js(或 main.ts)中 createApp(App) 之后、app.mount() 之前注册,否则页面实例已创建完毕,混入完全不生效。
mixins 文件怎么写才不会和组件冲突
mixins 是一个普通 JS 对象,导出时用 export default,内部可包含 data、methods、computed、onLoad、onShow 等任意 Vue 选项。但要注意:
-
data必须是函数,返回对象,否则多个页面会共享同一份数据副本 - 避免直接定义
name、title这类通用名变量,容易被页面自身同名字段覆盖或静默合并 - 方法名建议加前缀,比如
mixTabbarSetBadge而非setBadge,降低命名冲突风险 - 如果用了 Vuex,
mapGetters或mapActions应放在 mixins 内部,不要依赖外部注入
为什么 onShareAppMessage 在 H5 上不触发
onShareAppMessage 和 onShareTimeline 是微信小程序平台原生回调,uni-app 只在编译到 MP-WEIXIN 时才将其挂载为生命周期钩子;H5 和 App 端既不调用,也不报错,只是静默忽略。
- 不能靠它实现跨端分享逻辑,H5 需单独用
uni.showActionSheet+ 自定义分享按钮 - 混入里写了
onShareAppMessage,但没做平台判断,上线后 H5 用户点分享按钮毫无反应——这是最常被忽略的兼容性盲区 - 若需统一入口,建议封装成方法如
triggerShare(),内部用#ifdef MP-WEIXIN区分逻辑
页面级 mixins 和全局混入的合并规则
页面自己写的 mixins: [a, b] 会和全局混入一起参与选项合并,但有关键差异:
- 生命周期钩子(如
onLoad、onShow)按「全局混入 → 页面 mixins 数组顺序 → 页面自身」依次执行 -
data函数各自独立执行,互不影响;但返回的对象属性若重名,页面自身的 data 会覆盖混入的同名字段 - 页面级定义的
onShareAppMessage会完全替换全局混入的同名函数,不是合并调用 - 计算属性和 methods 同名时,页面自身的优先级更高,混入的会被忽略(不是报错,而是静默丢弃)
真正容易出问题的,是以为「混入了就能跨端通用」,结果在 H5 测试时发现分享/徽标/支付相关逻辑全失效;还有就是把 data 写成对象字面量,导致多个 tab 页面共用同一份购物车数量。










