uniapp vue3模式下定义全局变量及方法

原创已于 2024-11-19 15:23:10 修改 · 5.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

于 2024-04-22 02:50:43 首次发布

文章讲述了在微信小程序中如何在根目录的common.js中创建全局变量并通过main.js导入并在组件中使用的技巧，以及遇到问题后的一种解决方案：使用`appContext.config.globalProperties`。

该文章已生成可运行项目，

在正H5里常，微信小程序得到全局变量, 有知道的老铁请指教--已解决

1.在根目录建立common目录及common.js

// 防止处理多次点击
function noMultipleClicks(methods, info) {
	// methods是需要点击后需要执行的函数， info是点击需要传的参数
	let that = this;
	if(that.noClick==null){
		that.noClick=true //布尔值 真为允许点
	}
	 if (that.noClick==true) {
	 	
	 	// 第一次点击
	 	if (info && info !== '') {
	 		// info是执行函数需要传的参数
	 		methods(info);
	 	} else {
	 		methods();
	 	}
		that.noClick=false
		setTimeout(() => {
			that.noClick = true;
		}, 2000)
	 } 
 }
function aaaa(){
	console.log("in common.js aaaa do it")
}
const atem={aaaa,noMultipleClicks}
//导出
export default {
	atem
	//禁止多次点击
}

2.在main.js中引入common.js

import common from "@/common/common.js"

并设置

app.config.globalProperties.$abc=common.atem
app.config.globalProperties.abc1="test"

3.在组件或页面中使用

在script里可以

getApp().$abc.aaaa()

如果要在template里,用上面的不行,可以在SCRIPT里定义个变量

    const ttt=getApp().$abc.noMultipleClicks

然后在template里引用,

ttt.aaaa()

//ttt.noMultipleClicks()

以上2024.04月测试可以

发布后一小时....在微信小程序无法得到这个全局变量-->已解决，看4

4.在微信小程序里,第三步的方式无效,用下面的方法测试可用

		const tem1=getCurrentInstance().appContext.config.globalProperties.abc1
		const tem2=getCurrentInstance().appContext.config.globalProperties.$abc
		console.log(tem1)//可得到abc变量的值 
        //aaaa和noMultipleClicks是在外部js中定义的两个方法,测试在H5和微信小程序中均可拿到.
        tem2.aaaa()
		tem2.noMultipleClicks(go1)

5. 2024.0630App.vue/App.uvue | uni-app官网在官方页面有介绍,

globalData在app.vue里定义

    export default {  
        globalData: {  
            text: 'text'  
        }
    }

const app = getApp()
console.log(app.globalData)
app.doSomething() // 调用 App.vue methods 中的 doSomething 方法

js中操作globalData的方式如下：

 getApp().globalData.text = 'test'

本文章已经生成可运行项目