uniapp中全局页面挂载组件（小程序，h5）

1.uniapp 自带的 easycom

使用easycom的好处

1、简化组件的使用，提高开发效率

2、不论组件目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

说明

• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用

• easycom方式引入组件不是全局引入，而是局部（按需）引入。例如在H5端只有加载相应页面才会加载使用的组件

• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）

• 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。

• easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。

• nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom

  • 示例

    "easycom": {
        "autoscan": true,
        "custom": {
          "^xxx-(.*)": "@/components/xxx-/index.vue" // 匹配components目录内xxx-**下的vue文件
        }
      },
    

  • 文件创建方法

    

    • 上面的方法挂载后，每个页面需要单独写组件的标签,只是不需要引入

      2.使用vue-inset-loader（方法仅限于vue版本为2和在小程序中使用）

      步骤：

      1.首先需要把uniapp项目 初始化

      npm init
      

      2.下载vue-inset-loader

      npm i vue-inset-loader
      

      3.创建vue.config.js 文件

      从HBuilder X创建的uniapp项目没有vue.config.js文件 所以需要建一个

      const path = require('path')
      module.exports = {
      	configureWebpack: {
      		module: {
      			rules: [{
      				test: /\.vue$/,
      				use: {
      				  // loader: "vue-inset-loader"
      				  // // 针对Hbuilder工具创建的uni-app项目
      				  loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
      				},
      			}]
      		},
      	}
      }
      

      4.创建组件

      

      5.全局引入组件引入到全局注册，可以在mian.js里面

      // 全局自定义loading
      import loading from '@/components/global/loading.vue';
      Vue.component('loading', loading)
      

      6.在pages.json文件中配置 insetLoader

      "insetLoader": {
      			//配置
      			"config": {
      				//将需要引入的组件名起了个loading的名字在下面label中使用
      				//右侧""为需要插入的组件标签
      				"loading": ""
      			},
      			// 全局配置
      			//需要挂在的组件名
      			"label": ["loading"],
      			//根元素的标签类型 也就是插入到页面哪个根元素下默认为div 但是uniapp中需要写为view
      			"rootEle": "view"
      	}
      

      同时我们也可以在某个路由里面单独引入

      "pages": [
      		{
      			"path": "pages/index/index", // 路由页面
      			"aliasPath":"/",  //对于h5端你必须在首页加上aliasPath并设置为/
      			"name": "index",
      			"style": {
      				"disableScroll": true // 设置为 true 则页面整体不能上下滚动（bounce
      			}
      			//单独配置，用法跟全局配置一致，优先级高于全局
      			"label": ["confirm"],
      			"rootEle": "view"
      		},
          ]
      

      6.然后我们在再封装公共的方式进行使用

      // loading提示
      	Vue.prototype.$loading=async function(obj){
      		// #ifndef H5
      		this.$refs.loadingView.show(obj)
      		// #endif
      		
      	}
      	Vue.prototype.$hideLoading=function(){
      		if(this.$refs.loadingView){
      			this.$refs.loadingView.close()
      		}
      	}
      

      3.如果是在h5页面的话，我们需要使用vue自带的动态挂载组件，所以我们需要加一下判断

      // vue 新增组件
      	const  addH5component= function(url,name){
      		return new Promise(async (r,_)=>{
      			const idName = 'loading_new_custom_' + new Date().getTime() + '_' + parseInt(Math.random() * 1000)
      			const customComponent = url.default
      			const customComponentCom = Vue.component('confirmDialog', customComponent)// 创建组件
      			const customComponentComNew = new customComponentCom()// 创建组件实例（可以传递参数 { propsData: props }）
      			const DOM = document.createElement('div')
      			DOM.setAttribute('class', `confirmDialog_new_custom ${name}_component`)
      			DOM.setAttribute('id', idName)
      			document.body.appendChild(DOM)
      			const comp = customComponentComNew.$mount(DOM.appendChild(document.createElement('template')))// 将虚拟dom节点改变成真实dom,获取组件的dom节点,并实现挂载
      			comp.componentId=idName
      			r(comp)
      		})
      		
      	}
      // loading提示
      	Vue.prototype.$loading=async function(obj){
      		// #ifdef H5
      		if(!this.$refs.loadingView){
      			this.$refs['loadingView']=await addH5component(require('@/components/global/loading.vue'),'loadingView')
      		}
      		this.$refs.loadingView.show(obj)
      		// #endif
      		// #ifndef H5
      		this.$refs.loadingView.show(obj)
      		// #endif
      		
      	}
      	Vue.prototype.$hideLoading=function(){
      		if(this.$refs.loadingView){
      			this.$refs.loadingView.close()
      			// #ifdef H5
      			// 删除组件
      			setTimeout(()=>{
      				document.querySelectorAll('.loadingView_component').forEach(item=>{
      					document.body.removeChild(item)
      				})
      				this.$refs.loadingView.$destroy()
      			},0)
      			// #endif
      		}
      	}