uniapp设置引导页

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

 步骤:

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

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

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

代码如下:

pages文件夹:

uniapp设置引导页_第1张图片

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






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:




你可能感兴趣的:(uni-app,前端)