【uni-app 怎么设置一个全局变量，在每个页面都能用】

最新推荐文章于 2025-09-30 10:22:35 发布

原创最新推荐文章于 2025-09-30 10:22:35 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

uni-app 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在uni-app中设置全局变量，并通过实例演示如何在不同页面间共享和更新这些变量，包括使用存储器进行变量管理和实现跨页面数据同步。

uni-app 怎么设置一个全局变量，在每个页面都能用

1.把变量放在一个存储器里

var name = ‘张三’
uni.setStorageSync(‘name’, name);

uni.setStorageSync(‘age’, ‘12岁’);

uni.setStorageSync(‘person’, {name:‘张三’,age:‘12岁’});

2.使用存储器的这个变量

uni.getStorageSync(‘name’)

var age = uni.getStorageSync(‘age’)
console.log(age)

var pe = uni.getStorageSync(‘person’)
console.log(po.name)

3.一个选择提醒时间的例子

页面一选择时间后，页面二同步显示选中的字样
在这里插入图片描述

博主标签的基本样式：基础样式

<template>
	<view>
		<comeBack text_name="提醒设置"></comeBack>
		<view class="imo rel fle_ali pad_l25 mbo20 " style="height: 100rpx;background-color: white;">
			<view class="">
				<text>不提醒</text>
			</view>
			<view class="abs_rig_cen fle mri30">
				<switch :checked=bg_show  @change="bgShow"  color="#00CE47" style="transform:scale(0.9)"/>
			</view>
		</view>
		<view class="bgw" >
		<view class="abs wh1 zin9" style="background-color: white;opacity: 0.5;" v-if="bg_show">
			
		</view>
			<view class="imo rel fle_ali pad_l25" style="height: 100rpx;" v-for="(item,index) in mo3_data">
				<view class="">
					<text>{{item}}</text>
				</view>
				<view class="abs_rig_cen fle">
					<view class="  iconfont fle_all pad_l25 mri40" >
						<text class="" style="color: #00CE47;font-size: 42rpx;" v-if="gou == index">&#xe648;</text>
						<view class="brr50 q38e"  v-else @tap="gouClick(index)">
							
						</view>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				mo3_data:['开始时','提前5分钟','提前10分钟','提前15分钟','提前20分钟','提前25分钟','提前30分钟','提前1小时','提前1天','自定义'],
				gou:0,
				bg_show:false,
				gou_bef:0,
			}
		},
		onShow() {
			var f = uni.getStorageSync('tixing')
			this.gou = f.index || 0
			console.log(f.name)
			if(f.name !== '不提醒'){
				this.bg_show = false
			}else{
				this.bg_show = true
				this.gou = -1
			}
			
		},
		methods: {
			gouClick(e){
				this.gou = e
				this.gou_bef = this.gou
				uni.setStorageSync('tixing',{name:this.mo3_data[this.gou],index:this.gou})
			},
			bgShow(e){
				console.log(e)
				var f = e.target.value
				console.log(e.target.value)
				if(f == true){
					this.bg_show = true
					this.gou = -1
					uni.setStorageSync('tixing',{name:'不提醒'})
				}else{
					this.bg_show = false
					this.gou = this.gou_bef
					uni.setStorageSync('tixing',{name:this.mo3_data[this.gou],index:this.gou})
				}
			}
		}
	}
</script>

<style>
	page{
		width: 100vw;
		height: 100vh;
		background-color: #eee;
	}
	.q38e{
		width: 38rpx;
		height: 38rpx;
		background-color: #eee;
		border: 1rpx solid #ccc;
	}
</style>

	<template>
	<view>
		<!-- <navigator url="../memo3/memo3"> -->
		<view class="imo rel fle_ali pad_l25" style="height: 100rpx;">
			<view class="" >
				<text>提醒时间</text>
			</view>
			<view class="abs_rig_cen fle" >
				<view class="">
					<text>{{tixing}}</text>
				</view>
<!-- 				<view class="  iconfont fle_all pad_l25" >
					<text class="fon_4 col_c">&#xe7a7;</text>
				</view> -->
			</view>
		
		</view>
		<!-- </navigator> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tixing:''
			}
		},
		onShow() {
			this.mem_data.star_time = yearTime('new')
			this.mem_data.end_time = hour(1,'new')
			this.tixing = uni.getStorageSync('tixing').name || '开始时'
		},
		methods: {
			
		}
	}
</script>

<style>

</style>