一、UniApp設(shè)置全局組件
1.全局注冊組件
兩種方法推薦使用easycom 注冊，easycom可以大規(guī)模注冊組件
//方法一 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結(jié)點，在微信小程序中為null直接返回
//console.log(uniApp)
if (!uniApp) return
// 全局組件掛載
const vm = new ComponentsObj({
store,
}).$mount()
uniApp?.appendChild(vm?.$el)
}
//在App掛載后操作
initGlobalComponents()二、微信小程序設(shè)置全局組件
1.下載插件
npm i vue-inset-loader
2.配置vue.config.js文件
沒有這個文件的話，新建一個vue.config.js文件文章來源：http://www.zghlxwxcb.cn/news/detail-770870.html
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
use: {
loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
},
}]
},
}
}
3.注冊全局組件
和uniapp中注冊全局組件操作一樣文章來源地址http://www.zghlxwxcb.cn/news/detail-770870.html
4.配置pages.json文件
//在pages.json文件中新加insetLoader屬性
"insetLoader": {
//配置
"config": {
"GlobalComponent": "<GlobalComponent/>"
},
// 全局配置
//需要掛在的組件名
"label": ["GlobalComponent"],
//根元素的標(biāo)簽類型
"rootEle": ".*"
},到了這里，關(guān)于UniApp轉(zhuǎn)微信小程序之全局組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
