uniapp运行到小程序Vue.use注册全局组件不起作用

真想吐槽一下小程序，uniapp运行到小程序使用Vue.use注册全局组件根本不起作用，也不报错，这只是其中一个问题，其他还有很多问题，比如vue中正常使用的没问题的语法，运行到小程序就不行，又是包太大也不让上传等等乱七八糟的问题。uniapp相对于小程序算是好点儿，但是uniapp的开发体验也真是糟糕，HBuilderX不好用，另外uniapp官方提供的内置的组件、api等感觉写的也不够直观明了、跟它搭配使用的u-view、uCharts等组件库跟的跟element-ui没法比。相信做过vue的没人愿意去搞这个uniapp。现在的app比较广泛普遍的、进入大众的移动端应用基本没有是用uniapp开发的，一般面向企业的app使用uniapp开发还是比较快的，且能发布到H5、微信小程序、支付宝小程序、app、百度小程序等等。也算是可以了。

稍微吐槽了一下~~~~~~~~~

然后进入正题，这个也很简单，大家知道就行。

在开发中，正常引入组件并注册使用是没问题

javascript 复制代码

<template>
	<view class="container">
		<view>我是父组件</view>
		<CustomComp />
	</view>
</template>
<script>
import CustomComp from '@/components/CustomComp.vue'
	export default {
		data() {
			return {}
		},
		components: { CustomComp }
	}
</script>
<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}
</style>

在main.js中引入，使用Vue.component注册全局组件也没问题，组件内可以正常使用的

javascript 复制代码

import App from './App'
import Vue from 'vue'
import store from './store/index.js'
import uView from '@/uni_modules/uview-ui'
import CustomComp from '@/components/CustomComp'

Vue.use(uView);
Vue.component('CustomComp', CustomComp)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App,
	store
})
app.$mount()

使用Vue.use注册全局组件，运行到微信小程序不起作用

相信大家都知道，vue中的Vue.use方法实际上是调用对象中的install方法、并将Vue实例传递到install方法中。当然如果是个函数的话，会直接调用该函数、同样会将Vue实例传递过去。但是在uniapp中使用Vue.use注册全局组件的时候，运行浏览器（H5）是没问题的，但是运行到微信小程序的时候不起作用！！！运行到支付宝等其他小程序没验证，估计也不行，大家可自行验证。如下：

main.js

javascript 复制代码

import App from './App'
import Vue from 'vue'
import store from './store/index.js'
import uView from '@/uni_modules/uview-ui'
import plugins from '@/plugins'

Vue.use(uView);
Vue.use(plugins)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App,
	store
})
app.$mount()

plugins/index.js

javascript 复制代码

import useGlobalComp from './useGlobalComp'

export default {
	install(Vue) {
		useGlobalComp(Vue)
	}
}

useGlobalComp.js

javascript 复制代码

import CustomComp from '@/components/CustomComp'

const comps = [{
	name: 'CustomComp',
	comp: CustomComp
}]

export default function(Vue) {
	for(let item of comps) {
		Vue.component(item.name, item.comp)
	}
}

就上面这种写法不起作用运行到浏览器正常使用，运行到小程序不起作用。

那么如何解决这种问题呢？

第一：我们肯定要避免这种写法，而且我印象用小程序不支持component动态加载组件：什么是动态组件？如下：

javascript 复制代码

<template>
	<view class="container">
		<view>我是父组件</view>
		<component :is="cname"></component>
		<wft-custom-comp />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cname: 'wft-custom-comp'
			}
		}
	}
</script>
<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}
</style>

就是使用component :is 使用变量这种小程序也不支持！！！运行到浏览器、app都是没问题的。

我们可以使用就像我上面说的Vue.component来注册全局组件

还有一种就是在pages.json中配置：如下：

javascript 复制代码

"^wft-(.*)": "@/components/wft-$1.vue"

这种写法就要求我们改一下组件名字，我上面写的就是以wft-开头的组件。

它的作用是定义一个通用的导入规则，以便在项目中引用以 "wft-" 开头的组件。

这个配置使用了正则表达式 ^wft-(.*)，其中 ^ 表示字符串的开头，wft- 是你要匹配的字符串开头部分，(.*) 是一个捕获组，用于捕获 "wft-" 之后的任何字符。

当你在项目中引用一个以 "wft-" 开头的组件时，例如 import WftComponent from 'wft-example';，UniApp 会根据这个配置自动将导入路径映射到 @/components/wft-example/index.vue。

这样，你就可以方便地在项目中引入和使用这些组件，而无需手动编写每个组件的导入路径。

这样配置之后，只要组件满足上面的目录和名称要求，就会自动去找对应的组件，直接使用就可以，不需要我们引入注册，跟全局注册了组件差不多这么理解，使用如下：

下面是项目目录：

这篇就这么多~~~~~~~~~