uniapp引导页设置

设计引导页面思路

首先 我们定义一个flag在Storage中 如果第一次打开这个页面的时候 获取不到这个flag 那我们将跳转到引导页面 在引导页面中 我们点击去到首页 则设置这个flag 则下次打开的时候即不会跳转了

在首页中定义一个方法

我们在首页的页面的method中定义一个isFirst判断是否为第一次进入此页面
如果flag为空的话则跳转到guide的引导页面

	isFirst(){
		const flag = uni.getStorageSync('flag');
		if(flag == ''){
			uni.navigateTo({
				url:'/pages/guide/guide'
			})
		} 			
	}

配置引导页面

我们一般引导页面都是由轮播图去写 所以我们这里直接使用一个swiper 插入图片 添加一点样式就可以了
guide.vue

<template>
	<view>
		<swiper :interval="3000" :style="{height:Height+'px'}">
			<swiper-item v-for="(item,index) in getImgList">
				<image :src="item.img" style="height: 100%;width: 100%;" @click="toHome(index)"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getImgList:[
					{img:'../../static/1.jpg'},
					{img:'../../static/2.jpg'},
					{img:'../../static/3.jpg'}
				],
				Height:''
			}
		},
		methods: {
			toHome(index){
				if(index == 2){
					uni.reLaunch({
						url:'/pages/index/index'
					})
					uni.setStorageSync('flag',true)
				}
			},
			getHeight(){
				uni.getSystemInfo({
                 success: res => {
                     this.Height = res.windowHeight; //窗口高度
                 }
             });
			}
		},
		onLoad() {
			this.getHeight();
		}
	}
</script>

这样一个简单的引导页面就做好了