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