【解决】uniapp的全局公共组件(不用在每个页面引入组件标签),各平台均可使用!!!!

感谢滚动君大佬提供的思路,但是此方法只适用于微信小程序

app端之所以不能用的关键原因在于不能找到resourcePath原始路径,不像小程序会提供一个路径区分哪些文件来自组件哪些文件来自页面,如果不做区分,那么页面栈就会超载,无法显示。

既然它自身不能提供路径,那么我们可以修改源码,路径在D:\Hbuild\plugins\uniapp-cli\node_modules@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\templateLoader.js
的templateLoader.js文件中修改代码如图:

【解决】uniapp的全局公共组件(不用在每个页面引入组件标签),各平台均可使用!!!!_第1张图片
在compilerOptions方法体中的最后一行加上
resourcePath: this.resourcePath
注意上一行的逗号不要忘了
然后在项目里面新建一个文件vue.config.js
填以下内容

module.exports = {
  
  chainWebpack: config => {
  	config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
  		const compile = options.compiler.compile
  		options.compiler.compile = (template,...args) => {
			
			
			
			//用来区分组件还是页面
			if(args[0].resourcePath.search("pages")!=-1){
				
				//防止app端重复加载而重复添加组件
				if(template.search("")==-1){
					 template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
							  <‘upload_file ’/>
					 `)
				}
			}
  			return compile(template,...args)
  		}
  		return options
  	})
  }
  
}




差点忘了你的组件必须是全局挂载的,在mian.js里面添加

import upload_file from '@/components/upload_file.vue'
 
Vue.component('upload_file', upload_file)

下面我自定义悬浮组件的源码
upload_file.vue

<template>
<view>
	<uni-fab :pattern="pattern"  :horizontal="horizontal" :vertical="vertical" @fabClick="upload_data" ></uni-fab>
</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				
				vertical: 'bottom',
				horizontal: 'right',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff',
					icon:'upload-filled'
				},
				
		}
	},
	methods:{
		upload_data(){
			this.$company.common({
			
			}, {
				'api':'unline'
			}).then(e => {
				console.log(e)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/	.uni-fab__circle--rightBottom[data-v-137a85dc] {
	    right: 15px;
	    bottom: 30px;
	    right: calc(70rpx + var(--window-right));
	    bottom: calc(150rpx + var(--window-bottom));
		}
	
	
</style>

都填完后重新加载一遍

你可能感兴趣的:(uni-app)