问题代码
import { createSSRApp } from "vue";
import App from "./App.vue";
import Domefrom "@/components/Dome.vue";
export function createApp() {
const app = createSSRApp(App);
//注册全局组件
app.component("Dome",Dome)
return {
app,
};
}
<template>
<view>
<Dome />
</view>
<template>
问题原因
按上文中的代码执行后，会发现在微信小程序开发中全局注册的组件是无法显示的，这是uniapp的一个未解决bug，
解决方案
在uniapp中出了可以通过vue实例的component方法注册全局组件外，uniapp支持另一种全局注册的方式，就是通过easycom扫描注册，步骤如下
easycom的扫描流程是：通过代码标签名称匹配custom扫描策略中的key值，然后再通过匹配组件地址加载组件文章来源：https://www.toymoban.com/news/detail-579567.html
- 在pages.json文件的中配置
easycom属性，代码如下
- 组件目录结构
src
|—— components
|—— TabBar
|—— index.vue
- pages.json
{
"pages": [],
"easycom": {
"autoscan": true,
"custom": {
"U-(.*)": "@/components/$1/index.vue"
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#fff"
}
}
- 页面文件
<template>
<view>
<U-TabBar/>
</view>
<template>
通过上述配置，可以发现再页面文件中的TabBar组件是可以显示出来的文章来源地址https://www.toymoban.com/news/detail-579567.html
到了这里，关于uni-app：vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
