uniapp 引导页

229 阅读1分钟

需求

在原有的功能上添加一个“引导页”,第一次进入app的时候弹出引导页(第一次下载app进去时候弹出)其余情况不弹出。

思路、注意点

  1. 在 page.json 的 pages 数组中改为第一项为 “启动页” (判断 是否 需要弹出“引导页”) 的 路由
  2. 在 启动页 判断 是有 token, 有的话证明不可能是第一次进入,则不可能到我们的新需求 “引导页”
  3. 没有 token 的话 就要进行判断是否需要出现 “引导页”,接下来就是 这个需求核心的东西了 见下一步
  4. 我的想法是 利用uni.setStorageSync() uni.getStorageSync() uni.removeStorageSync()这三个api 其实这三个 就是本地存储 ISFIRSTINTER
  5. 回到第三步 其实就是判断 ISFIRSTINTER 是否存在,是存在 就 不走 “引导页” 直接走到 “登录页”

上核心代码

$one 是自己封装的 一个 sdk 包,不用管

// 启动页的 判断
    checkToken () {
        const token = $one.uc.token.getToken(),
        if (token) {

        } else {
          if(getIsFirst() === 'FALSE'){
            toLogin(); // 前往登录页面
          }else{
            setTimeout(()=>{
              uni.navigateTo({
                url: `/pages/guide/index` // 这边就是进入到 “引导页” 了
              });
            },1500)
          }
        }
    }

这是 getIsFirst 函数 核心 的东西

    /* 判断是否为第一次进入app */
    import $one from '@/one-builder'
    // 本地存储的租户信息名称
    const IS_FIRST = 'IS_FIRST';

    /**
     * 本地缓存isFirst
     */
    const setIsFirst = function () {
        $one.uc.local.localStorage.setItem(IS_FIRST, 'FALSE');
    }

    /**
     * 获取本地缓存的isFirst
     */
    const getIsFirst = function () {
      return $one.uc.local.localStorage.getItem(IS_FIRST);
    }
    /* 
        删除本地缓存isFirst (测试用)
    */
    const removeIsFirst = function (){
        $one.uc.local.localStorage.removeItem(IS_FIRST)
    }

    export {
        setIsFirst,
        getIsFirst,
        removeIsFirst
    }