ProAdvanced/components/code-elf-guide/uni-guide.md

引导页

基于uni-app框架的swiper组件打开的时候启动。

首次启动展示引导页，之后启动不再展示。那么就意味着，我们需要一个标识来确定，App是否已经启动过。

我们可以在本地存储一个key来做为已经启动过App的标识。那么，我们在入口这里，就可以读取这个key，来决定是否展示引导页。

因工作繁忙目前该程序金对安卓做了适配，IOS可根据环境自己适配。谢谢

目录结构

• /pages/index/index.vue //入口页

  存储key

• 向本地存储中设置launchFlag的值，即启动标识；

  获取key

• 向本地存储中设置launchFlag的值，即启动标识；

• 获取本地存储中launchFlag的值

• 若存在，说明不是首次启动，直接进入首页；

• 若不存在，说明是首次启动，进入引导页；

  	<view class="main">
  		<code-elf-guide v-if="guidePages"></code-elf-guide>
  	</view>
  
  

  	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
  				}
  			}
  		}
  	}
  

  	page,.main{
  		width: 100%;
  		height: 100%;
  	}
  
  

首页清除key，进行测试

• 清除本地存储中设置launchFlag的值，即启动标识；

• 两秒后重启APP，进行测试

  	uni.showModal({
      title: '清除launchFlag值',
      content: '确定要清除launchFlag值，进行重启测试？',
      success: function (res) {
          if (res.confirm) {
              console.log('用户点击确定');
              // 清除缓存
              uni.clearStorage();
              uni.showToast({
                  icon: 'none',
                  duration:3000,
                  title: '清除成功2秒后重启'
              });
              // 两秒后重启
              setTimeout(function() {
                  uni.hideToast();
                  plus.runtime.restart();
              }, 2000);
          } else if (res.cancel) {
              console.log('用户点击取消');
          }
      }
  });