uniapp中使用vue语法定义全局变量

最新推荐文章于 2024-05-14 10:59:28 发布

别拿曾经看以后~

最新推荐文章于 2024-05-14 10:59:28 发布

阅读量2k

点赞数 1

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42342065/article/details/106574860

版权

前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

vue

22 篇文章 0 订阅

订阅专栏

**前言：**在用uniapp写移动端的时候需要调用后台接口返回的值，然后这个值可以在全局使用。

具体步骤：
1.新建js文件，common.js;
2.在common.js中首先定义一个全局变量，并给他赋初始值，比如:style;

export default {
    memberObj:{
		//1 普通  2幼儿园  3高中  4节日
        style:3,
		className:"大班",
		isTest:false,

    },
	 }
    // setMemberObj(data){
		
         // this.memberObj = Object.assign({},this.memberObj,data) 
    // }
}

3.然后在App.vue中调用后台接口获取值，并把值回调给变量，即可实现动态给变量赋值，并可全局使用

onShow: function() {
		//promiseGetRequest是封装好的promise同步接口
			var _this=this;
			request.promiseGetRequest('接口地址')
			.then(res=>{
				console.log(res.data.d[0])
				_this.$member.memberObj.style=res.data.d[0].themeId;
				_this.style=_this.$member.memberObj.style;
			// console.log(_this.style)
			switch(_this.style){
				case 1:
					document.body.style.backgroundImage="linear-gradient(180deg, #50ABFA, #666FF6)"
					break;
				case 2:
					document.body.style.background="url("+this.imgServerUrl+"/bg2.png) no-repeat";
					document.body.style.backgroundSize="100% 100%"
					break;
				case 3:
					document.body.style.background="url("+this.imgServerUrl+"/bg3.png) no-repeat";
					document.body.style.backgroundSize="100% 100%"
					break;
				case 4:
					document.body.style.background="url("+this.imgServerUrl+"/bg4.png) no-repeat";
					document.body.style.backgroundSize="100% 100%"
					// document.body.style.backgroundImage="linear-gradient(180deg, #50ABFA, #666FF6)"
					break;
			}
			})
		},