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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Space Chars

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值