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、百度小程序等等。也算是可以了。

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

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

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

<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注册全局组件也没问题，组件内可以正常使用的

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

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

import useGlobalComp from './useGlobalComp'

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

useGlobalComp.js

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动态加载组件：什么是动态组件？如下：

<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中配置：如下：