【FAQ】uni-app：vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

问题代码

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值，然后再通过匹配组件地址加载组件

1. 在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组件是可以显示出来的