uni-app 启动页，引导页，广告页

1 勾选自定义启动图 这个需要打包才能生效

2 引导页，广告页

1 plus.navigator.closeSplashscreen();//为关闭启动页，需要设置启动页为不自动关闭

2 请求接口后再调用plus.navigator.closeSplashscreen() 防止出现白屏的情况

3 通过 uni.setStorageSync(‘launchFlag’, true) 来判断是引导页还是广告页

<template>
	<view>
		<view class="swiper-css zqui-rel" :style="{ height: hpx }">
			<swiper class="swiper" :style="{ height: hpx }" :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" @change="guideAction">
				<!-- next-margin="50rpx" -->
				<swiper-item class="flex1" v-for="(item, index) in imageList" :key="index" @click="gotoLink(item)">
					<image class="image-size" mode="aspectFit"  :src="item.image" />
				</swiper-item>
			</swiper>
			<!-- 按钮样式切换 -->
			<template v-if="cur != imageList.length-1">
				<view class=" flex-column dots">
					<block v-for="(item,index) in imageList" :key="index">
						<view class="dot" :class="{'active':  index == cur}"></view>
					</block>
				</view>
			</template>
			<!-- 第三张图使用按钮《立即进入》 -->
			<template v-if="cur ==imageList.length-1&&type==1">
				<button class="flex-column cu-btn footer" @click="launchApp">立即体验</button>
			</template>
			<!-- 右上角跳过按钮 -->
			<view class="btn-box" @click="launchApp" v-if="imageList.length"><text class="passbtn">跳过</text></view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api';
	// const animation = weex.requireModule('animation');
	const animation = uni.requireNativePlugin('animation');
	export default {
		data() {
			return {
				//修改图片,文字描述
				imageList: [],
				indicatorDots: false,
				autoplay: false,
				interval: 10000,
				duration: 500,
				iStatusBarHeight: '0px',
				hpx: '100vh',
				cur: 0,
				dotsStyles: '',
				showGuid: "",
				token: "",
				type: 1
			};
		},
		onLoad() {
			let that = this;
			
			uni.getSystemInfo({
				success: function(res) {
					that.hpx = res.windowHeight + 'px';
				}
			});

			/**
			 * 应道业
			 * **/
			let launchFlag = uni.getStorageSync('launchFlag');
			this.token = uni.getStorageSync('access_token');
			console.log(launchFlag)
			if (launchFlag) {
				this.type = 2;
				this.geticonType(2)
			} else {
				this.type = 1;
				this.geticonType(1)
			}
			
			
		},
		onReady() {
			this.move(0, 1);
		},
		methods: {
			gotoLink(item) {
				if (item.link) {
					uni.setStorageSync('guideLink', item.link)
					uni.navigateTo({
						url: "/pages/guide/guideLink/guideLink"
					})
				}


			},
			geticonType(type) {
				console.log(type, 'type')
				api.getadvertByType({
					type: type
				}).then(res => {
					console.log(res, '引导页数据')
					if (res.code == 0) {
						this.imageList = res.data;
						if (this.imageList.length == 0) {
							this.launchApp()
							return 
						}
						setTimeout(()=>{
							plus.navigator.closeSplashscreen();
						},1000)
						
						if(type==2){
							setTimeout(()=>{
								this.launchApp()
							},4000)
						}
						
					}
				})
			},
			launchApp() {
				//跳过引导页,储存本地值,下次进入直接跳过
				// 判断是否存在token

				uni.setStorageSync('launchFlag', true)
				if (!this.token) {
					uni.reLaunch({
						url: '/pages/login/login'
					});

				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})

				}
			},
			guideAction(event) {



				let that = this,
					index = event.detail.current;
				that.cur = index;
				if (index == 0) {
					that.move(0, 1);
					that.moveTwo(150, 0.1);
					that.moveThree(150, 0.1);
					that.lefMainAction(0);
				}
				if (index == 1) {
					that.moveTwo(0, 1);
					that.move(150, 0.1);
					that.moveThree(150, 0.1);
					that.lefMainAction(uni.upx2px(80) + 'px');
				}
				if (index == 2) {
					that.moveThree(0, 1);
					that.moveTwo(150, 0.1);
					that.move(150, 0.1);
					that.lefMainAction(uni.upx2px(160) + 'px');
				}
			},
			lefMainAction(mum) {
				var testLM = this.$refs.lefMain;
				animation.transition(
					testLM, {
						styles: {
							transform: 'translate(' + mum + ',0px)'
						},
						duration: 400, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			},
			move(tran, opa) {
				var testEl = this.$refs.box1;
				animation.transition(
					testEl, {
						styles: {
							transform: 'translate(' + tran + 'px,0px)',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
				var textE2 = this.$refs.box2;
				animation.transition(
					textE2, {
						styles: {
							transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			},
			moveTwo(tran, opa) {
				var testEl = this.$refs.box3;
				animation.transition(
					testEl, {
						styles: {
							transform: 'translate(' + tran + 'px,0px)',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
				var textE2 = this.$refs.box4;
				animation.transition(
					textE2, {
						styles: {
							transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			},
			moveThree(tran, opa) {
				var testEl = this.$refs.box5;
				animation.transition(
					testEl, {
						styles: {
							transform: 'translate(' + tran + 'px,0px)',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
				var textE2 = this.$refs.box6;
				animation.transition(
					textE2, {
						styles: {
							transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
							transformOrigin: 'center center',
							opacity: opa
						},
						duration: 800, //ms
						timingFunction: 'ease',
						delay: 0 //ms
					},
					function() {}
				);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
		min-height: 100vh;
		height: 100vh;
	}
    
	.swiper-css{
		background-color: #FFFFFF;
	}


	.guide {
		flex-direction: column;
		flex: 1;
	}

	.flex1 {
		flex: 1;
		width: 750rpx;
		height: 100vh;


	}

	.image-size {
		width: 750rpx;
		height: 100vh;
		// margin-left: 60rpx;
	}

	.title-box {
		padding: 250rpx 0 120rpx 64rpx;
	}

	.guide-title {
		font-size: 48rpx;
		font-weight: bold;
		color: rgba(58, 61, 68, 1);
	}

	.guide-subtitle {
		// margin-top: 2000rpx;
		font-size: 35rpx;
		color: rgba(131, 136, 146, 1);
		line-height: 50rpx;
	}

	.footer {
		width: 231rpx;
		height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: 116rpx;
		left: 37%;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: #009fe8;
	}

	.btn-box {
		position: absolute;
		z-index: 999;
		right: 40rpx;
		top: 120rpx;
	}

	.dots {
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 999;
		height: 151rpx;
		left: 0;
		right: 0;
		bottom: 20rpx;
	}

	.passbtn {
		color: #838892;
		text-align: center;
		border-width: 1rpx;
		border-color: rgba(0, 0, 0, 0.5);
		border-style: solid;
		border-radius: 30rpx;
		font-size: 28rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.dot {
		margin: 0 4rpx;
		width: 15rpx;
		height: 15rpx;
		background: #CDD2DD;
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dot.active {
		width: 40rpx;
		background: #009fe8 !important;
	}

	/* 相对定位 */
	.zqui-rel {
		position: relative;
	}

	.swiper-css {
		width: 750rpx;
		// height: 100vh;
	}

	.swiper-item {
		width: 750rpx;
	}
</style>