UniApp转微信小程序之全局组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了UniApp转微信小程序之全局组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、UniApp设置全局组件

1.全局注册组件

两种方法推荐使用easycom 注册，easycom可以大规模注册组件

//方法一 Vue自带component方法  
//位置 main.js

import GlobalComponent from './components/index.vue'
Vue.component("GlobalComponent",GlobalComponent)

//方法二 使用easycom 
//位置 pages.json
{

 "easycom": {
		"autoscan": true,
		"custom": {
            "^mt-(.*)": "@/components/blog/mt-$1.vue",
			"GlobalComponent": "@/components/index.vue"

		}
	},
}

2.全局插入组件

//位置 main.js
import GlobalComponents from './components/index.vue'
const ComponentsObj = Vue.extend(GlobalComponents)


// h5所有页面挂上GlobalComponents组件
const initGlobalComponents = () => {

	//不兼容移动端
	const uniApp = app?.$el
	
	//在H5端为uni-app结点，在微信小程序中为null直接返回
	//console.log(uniApp)
	
	if (!uniApp) return
     
	// 全局组件挂载
	const vm = new ComponentsObj({
		store,
	}).$mount()

	uniApp?.appendChild(vm?.$el)
}

//在App挂载后操作
initGlobalComponents()

二、微信小程序设置全局组件

1.下载插件

npm i vue-inset-loader

2.配置vue.config.js文件

没有这个文件的话，新建一个vue.config.js文件


const path = require('path')

module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.vue$/,
				use: {
					loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
				},
			}]
		},
	}
}

3.注册全局组件

和uniapp中注册全局组件操作一样文章来源地址https://www.toymoban.com/news/detail-770870.html

4.配置pages.json文件

//在pages.json文件中新加insetLoader属性
	"insetLoader": {
		//配置
		"config": {
			"GlobalComponent": "<GlobalComponent/>"
		},
		// 全局配置  
		//需要挂在的组件名
		"label": ["GlobalComponent"],
		//根元素的标签类型 
		"rootEle": ".*"
	},

到了这里，关于UniApp转微信小程序之全局组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！