uniapp设置引导页

Mitin_

已于 2023-04-06 14:44:31 修改

阅读量2.1k

点赞数 1

文章标签： uni-app 前端

于 2023-04-05 16:00:07 首次发布

本文链接：https://blog.csdn.net/mitin_/article/details/129971781

版权

在开发APP时，为了遵循用户授权原则，通常需要在启动时展示隐私政策页面。本文描述了如何使用uni-app框架创建这样一个页面，用户同意后进入应用，拒绝则退出。具体步骤包括创建引导页、配置页面顺序和使用uni.redirectTo进行跳转控制。此外，还展示了如何存储用户同意状态，避免重复显示隐私政策。

摘要由CSDN通过智能技术生成

需求：在开发APP的过程中，基于用户授权，我们可能会需要在进入APP之前做一个隐私政策页面，用户点击同意后进入APP或者拒绝接受后退出APP的操作。

步骤：

一、首先在pages文件夹下新建引导页，并完成基础页面

二、在pages.json中配置引导页，引导页放在最前面，并禁用原生导航栏

三、在App.vue中使用uni.redirectTo控制页面跳转

代码如下：

pages文件夹：

pages下配置的引导页的页面内容可以根据自身需要设置，可以将隐私政策做成弹窗，这样点击同意隐私政策后，隐藏隐私政策弹出层并且存储一个值判断，以便之后都不再弹出，随着引导页也可以显示。

<template>
	<view class="content">
		<image class="start-app-img" src="../../static/startApp.png" mode=""></image>
		<view class="space">

		</view>
		<view v-if="!agree" class="policy-box">
			<view class="policy">
				<view class="title">
					— 温馨提示 —
				</view>

				<view class="text">
					隐私政策隐私政策隐私政策，隐私政策隐私政策隐私政策隐私，隐私政策隐私政策 <br>
					隐私政策隐私政策隐私政策，隐私政策隐私政策，隐私政策隐私政策
				</view>
				<view class="btn-box">
					<view @click="agreePolicy(0)" class="btn1">
						拒绝并退出
					</view>
					<view @click="agreePolicy(1)" class="btn2">
						阅读并同意
					</view>
				</view>
			</view>
		</view>
		<view @click="goHome()" class="btn">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: ""
			}
		},
		onLoad() {
			// uni.setStorageSync('agree', "")
			this.agree = uni.getStorageSync('agree')
		},
		methods: {
			goHome() {
				if (this.agree) {
					uni.switchTab({
						url: '/pages/home/home'
					});
				}
			},
			// 是否同意政策
			agreePolicy(act) {
				if (act == 0) {
					plus.runtime.quit()
				} else if (act == 1) {
					uni.setStorageSync('agree', true)
					this.agree = true
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		.content {
			position: relative;

			.start-app-img {
				position: absolute;
				width: 100%;
				height: 100vh;
				z-index: -1;

			}


			// .space {
			// 	height: 89vh;
			// }

			.policy-box {
				position: absolute;
				width: 100%;
				height: 100vh;
				background-color: rgba(0, 0, 0, .4);
				color: #fff;

				.policy {
					width: 600rpx;
					box-sizing: border-box;
					height: 408rpx;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					opacity: 1;
					border: 3px solid rgba(161, 9, 255, 1);
					// border-image: linear-gradient(153deg, rgba(13, 81, 255, 1), rgba(161, 9, 255, 1)) 3 3;
					background-color: #0B0752;
					padding: 0;
					margin: 0 auto;
					margin-top: 38vh;
					overflow: hidden;

					.title {
						width: 236rpx;
						height: 58rpx;
						background: linear-gradient(90deg, #60C5FA 0%, #D436F6 100%);
						border-radius: 45rpx 45rpx 45rpx 45rpx;
						opacity: 1;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						line-height: 58rpx;
						text-align: center;
						padding: 0;
						margin: 12rpx auto;
					}

					.text {
						height: 220rpx;
						padding: 10rpx 20rpx;
						margin-bottom: 10rpx;
						// border: #fff solid 1px;
					}

					.btn-box {

						height: 80rpx;
						;
						display: flex;

						.btn1 {
							width: 300rpx;
							height: 80rpx;
							background: rgba(187, 187, 187, 0.48);
							opacity: 1;
							font-size: 30rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							line-height: 80rpx;
							text-align: center;
						}

						.btn2 {
							width: 300rpx;
							height: 80rpx;
							background: linear-gradient(135deg, #436CFF 0%, #E14AFA 100%);
							opacity: 1;
							font-size: 30rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							line-height: 80rpx;
							text-align: center;
						}
					}
				}
			}

			.btn {
				position: absolute;
				top: 89vh;
				width: 82%;
				height: 100rpx;
				// border: 1px solid #fff;
				left: -26rpx;
				right: 0;
				padding: 0;
				margin: 0 auto;
				border-radius: 60rpx;
			}

		}
	}
</style>

pages.json：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/guide",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}

		}, {
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "主页",
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/photograph/photograph",
			"style": {
				"navigationBarTitleText": "其他",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}
		}, {
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom",
				"app-plus": {
					"bounce": "none"
				}
			}

		}

	],
	"tabBar": {
		"selectedColor": "#EC71FF",
		"color": "#999999",
		"borderStyle": "block",
		"backgroundColor": "#fff",
		"fontSize": "14px",

		"list": [{
				"pagePath": "pages/photograph/photograph",
				"text": "其他",
				"selectedIconPath": "static/tabbar/photoing.png",
				"iconPath": "static/tabbar/photo.png"
			},
			{
				"pagePath": "pages/home/home",
				"text": "主页",
				"selectedIconPath": "static/tabbar/homeing.png",
				"iconPath": "static/tabbar/home.png"
			},

			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"selectedIconPath": "static/tabbar/mying.png",
				"iconPath": "static/tabbar/my.png"
			}

		]


	},
	"subPackages": [{
		"root": "subpkg",
		"pages": [{
			"path": "user_login/user_login",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}
...
     ]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app"

	},
	"uniIdRouter": {}

}

App.vue：

<script>
	export default {
		data() {
			return {

			}
		},
		onLaunch: function() {
			console.log('App Launch')
			uni.redirectTo({
				url: '/pages/index/guide',
			});
			// uni.setStorageSync('launchFlag',"")
           // 可以用户点击接受隐私政策后设为true，之后有值就直接进入首页
			 const value = uni.getStorageSync('launchFlag');
			 if (value) {
			 	// 如何已经有，直接去home首页
				uni.switchTab({
			 		url: '/pages/home/home'
			 	});
			 } else {
				// 没有值，跳到引导页
			 	uni.redirectTo({
			 		url: '/pages/index/guide'
			 	});
			 }
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},

		methods: {

		}

	}
</script>

<style>
	/*每个页面公共css */
</style>