快捷導(dǎo)航

uniapp中全局頁面掛載組件實戰(zhàn)過程(小程序)

更新時間：2022年12月09日 15:59:55 作者：Front?End?Developer

這篇文章主要給大家介紹了關(guān)于uniapp中全局頁面掛載組件(小程序)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

步驟：

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

npm init

2.下載所需庫

npm i vue-inset-loader

3.創(chuàng)建vue.config.js 文件

從HBuilder X創(chuàng)建的uniapp項目沒有vue.config.js文件所以需要建一個

const path = require('path')

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

這里面的配置我也是研究了好久最后實驗出這個可以用

4.創(chuàng)建組件

我們就新建一個test的組件吧

5.將組件引入到全局注冊

也就是在main.js文件中引入注冊組件

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

除了這種全局引入注冊組件也可以在page.json文件中配置easycom

官方文檔

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

	//在pages.json文件中新加insetLoader屬性
	"insetLoader": {
		//配置
		"config": {
			//將需要引入的組件名起了個confirm的名字在下面label中使用
			//右側(cè)"<test ref='confirm' />"為需要插入的組件標(biāo)簽
			"confirm": "<test ref='confirm' />"
		},
		// 全局配置  
		//需要掛在的組件名
		"label": ["confirm"],
		//根元素的標(biāo)簽類型 也就是插入到頁面哪個根元素下默認(rèn)為div 但是uniapp中需要寫為view
		"rootEle": "view"
	},
	"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				// 單獨配置，用法跟全局配置一致，優(yōu)先級高于全局
				"label": ["confirm"],
				"rootEle": "view"
			}
		}
	],

如果說你不需要每個頁面都引入這個組件可以用單獨配置

但是這里我就覺得有點和以往的掛載一樣了都需要在頁面中配置