前端

components/code-elf-guide/code-elf-guide.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="content">
+		<swiper class="swiper" 
+		:autoplay="autoplay" 
+		:duration="duration">
+			<swiper-item>
+				<view class="swiper-item">
+					<view class="swiper-item-img"><image src="../../static/img/splash1.png" mode="aspectFit"></image></view>
+				</view>
+				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
+			</swiper-item>
+			<swiper-item>
+				<view class="swiper-item">
+					<view class="swiper-item-img"><image src="../../static/img/splash2.png" mode="aspectFit"></image></view>
+				</view>
+				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
+			</swiper-item>
+			<swiper-item>
+				<view class="swiper-item">
+					<view class="swiper-item-img"><image src="../../static/img/splash3.png" mode="aspectFit"></image></view>
+				</view>
+				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
+			</swiper-item>
+		</swiper>
+		<!-- <view class="uniapp-img"><image src="../../static/guide/uniapp4@2x.png" mode="aspectFit"></image></view> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				background: ['color1', 'color2', 'color3'],
+				autoplay: false,
+				duration: 500,
+				jumpover: '跳过',
+				experience: '立即体验'
+			}
+		},
+		methods: {
+			launchFlag: function(){
+				/**
+				 * 向本地存储中设置launchFlag的值，即启动标识；
+				 */
+				uni.setStorage({
+						key: 'launchFlag',
+						data: true,
+				});
+				uni.switchTab({
+					url: '/pages/tabBar/component/component'
+				});
+				
+			}
+		}
+	}
+</script>
+<style>
+	page,
+	.content{
+		width: 100%;
+		height: 100%;
+		background-size: 100% auto ;
+		padding: 0;
+	}
+	.swiper{
+		width: 100%;
+		height: 80%;
+		background: #FFFFFF;
+	}
+	.swiper-item {
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		position: relative;
+		display: flex;
+		/* justify-content: center; */
+		align-items:flex-end;
+		flex-direction:column-reverse
+	}
+	.swiper-item-img{
+		width: 100%;
+		height: auto;
+		margin: 0 auto;
+	}
+	.swiper-item-img image{
+		width: 80%;
+	}
+	.uniapp-img{
+		height: 20%;
+		background: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items:center;
+		overflow: hidden;
+	}
+	.uniapp-img image{
+		width: 40%;
+	}
+	
+	.jump-over,.experience{
+		position: absolute;
+		height: 60upx;
+		line-height: 60upx;
+		padding: 0 40upx;
+		border-radius: 30upx;
+		font-size: 32upx;
+		color: #454343;
+		border: 1px solid #454343;
+		z-index: 999;
+	}
+	.jump-over{
+		right: 45upx;
+		top: 125upx;
+	}
+	.experience{
+		right: 50%;
+		margin-right: -105upx;
+		bottom: 0;
+	}
+</style>

pages/index/index.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="main">
+		<code-elf-guide v-if="guidePages"></code-elf-guide>
+	</view>
+</template>
+
+<script>
+	import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'
+	export default {
+        components: {
+            codeElfGuide
+        },
+		data() {
+			return {
+				guidePages:true
+			}
+		},
+		onLoad(){
+			this.loadExecution()
+		},
+		methods: {
+			loadExecution: function(){
+				/**
+				 * 获取本地存储中launchFlag的值
+				 * 若存在，说明不是首次启动，直接进入首页；
+				 * 若不存在，说明是首次启动，进入引导页；
+				 */
+				try {
+					// 获取本地存储中launchFlag标识
+				    const value = uni.getStorageSync('launchFlag');
+				    if (value) {
+						// launchFlag=true直接跳转到首页
+						uni.switchTab({
+							url: '/pages/tabBar/component/component'
+						});
+				    } else {
+						// launchFlag!=true显示引导页
+				        this.guidePages = true
+				    }
+				} catch(e) { 
+					// error 
+					uni.setStorage({ 
+						key: 'launchFlag', 
+						data: true, 
+						success: function () {
+							console.log('error时存储launchFlag');
+						} 
+					}); 
+					this.guidePages = true
+				}
+				return;
+				uni.switchTab({
+				    url: '/pages/tabBar/component/component'
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	page,.main{
+		width: 100%;
+		height: 100%;
+	}
+</style>