uniapp中全局页面挂载组件（小程序，h5）-Toy模板网

这篇具有很好参考价值的文章主要介绍了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-$1/index.vue" // 匹配components目录内xxx-**下的vue文件
    }
  },

文件创建方法

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

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

<template>
	<view >
            <xxx-zj></xxx-zj>
	</view>
</template>

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.创建组件
uniapp中全局页面挂载组件（小程序，h5）

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

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

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

"insetLoader": {
			//配置
			"config": {
				//将需要引入的组件名起了个loading的名字在下面label中使用
				//右侧"<loading ref='loading' />"为需要插入的组件标签
				"loading": "<loading ref='loadingView' />"
			},
			// 全局配置
			//需要挂在的组件名
			"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.然后我们在再封装公共的方式进行使用文章来源地址https://www.toymoban.com/news/detail-448679.html

// 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
		}
	}