uni-app 微信小程序在vue3模式下 注册全局组件失效

uni-app 微信小程序在vue3模式下 注册全局组件失效

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境版本号 11
HBuilderX类型 正式
HBuilderX版本号 3.4.7
第三方开发者工具版本号 1.05.2204180
基础库版本号 2.2.40
项目创建方式 HBuilderX

示例代码：

import App from './App'  

import myTest from "./uni_modules/my-test/index.js";  

import { createSSRApp } from 'vue'  
export function createApp() {  
  const app = createSSRApp(App)  
  app.use(myTest)  
  return {  
    app  
  }  
}

import myCard from "./components/my-test/my-card.vue";  
export default {  
    install(app) {  
        app.component("my-card", myCard);  
    }  
}

操作步骤：

  • 下载附件中的项目，解压运行

预期结果：

  • 界面上显示文本：cccccc

实际结果：

  • 页面空白

bug描述：

通过app.use()的方式安装插件，在插件install()方法中添加全局组件失效。 最近在写一个插件，需要动态的注册全局组件，在h5模式下没问题，在微信小程序中运行失败。发现是全局组件注册失败。特意写了一个bug重新的demo。希望官方早点修护，感激不尽。

but-demo.zip


更多关于uni-app 微信小程序在vue3模式下 注册全局组件失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

仅支持在main.js中全局注册。注册时，第一个参数必须是静态的字符串。 vue2：https://uniapp.dcloud.net.cn/tutorial/vue-components.html#全局注册
vue3：https://uniapp.dcloud.net.cn/tutorial/vue3-components.html#全局注册

更多关于uni-app 微信小程序在vue3模式下 注册全局组件失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


额

回复 k***@163.com: 所以是怎么解决哦

就这？你哪怕是贴个能解决的链接

回复 1***@qq.com: 通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

官方回复就一句仅支持在main.js中全局注册？难道我们不知道是在main.js中注册？太敷衍了吧。 楼主的demo都写的很清楚了，很明确的即使注册的代码移动到main.js也是有问题的，这么严重的bug轻飘飘的一句话就敷衍了，都不做简单复现测试？

亲测无效

在 uni-app 中使用 Vue 3 开发微信小程序时，注册全局组件失效可能是由于以下原因导致的。以下是一些常见的问题和解决方法：

1. 确保正确注册全局组件

在 Vue 3 中，全局组件的注册方式与 Vue 2 有所不同。你需要使用 app.component 方法来注册全局组件。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

2. 检查组件名称

确保你在注册组件时使用的名称与在模板中使用的名称一致。例如，如果你注册的组件名称是 MyComponent，那么在模板中应该使用 <my-component /> 或 <MyComponent />。

3. 确保组件路径正确

确保你在 import 组件时路径是正确的。如果路径错误，组件将无法正确加载。

4. 检查 uni-app 配置

在 uni-app 中，微信小程序的配置可能会影响到组件的加载。确保你在 pages.json 或 manifest.json 中没有错误的配置。

5. 检查 vue-loader 版本

确保你使用的 vue-loader 版本与 Vue 3 兼容。Vue 3 需要 vue-loader@16 或更高版本。

6. 检查 uni-app 版本

确保你使用的 uni-app 版本支持 Vue 3。uni-app 从某个版本开始才支持 Vue 3，如果你使用的是旧版本，可能需要升级。

7. 检查微信开发者工具

有时候微信开发者工具可能会有缓存或其他问题，尝试清除缓存或重启开发者工具。

8. 使用 Vue 3 的 Composition API

如果你使用的是 Vue 3 的 Composition API，确保你在组件中正确地使用了 setup 函数。

// MyComponent.vue
<template>
  <div>
    <h1>My Component</h1>
  </div>
</template>

<script>
export default {
  setup() {
    // 组件逻辑
  }
}
</script>

9. 检查 uni-app 插件

如果你使用了某些 uni-app 插件，确保这些插件与 Vue 3 兼容。

10. 调试

如果以上方法都无法解决问题，可以尝试在组件中添加一些调试信息，或者在微信开发者工具中查看控制台输出，看看是否有错误信息。

// MyComponent.vue
<template>
  <div>
    <h1>My Component</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('MyComponent mounted')
  }
}
</script>
回到顶部