更新记录

V2.0（2020-04-05） 下载此版本

修改为组件模式

平台兼容性

引导页

程序员导航,一个帮助开发者成长的导航。

基于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('用户点击取消');
          }
      }
  });