网站设计,网站建设,公众号开发,微信小程序-四川省店心电子商务有限公司
当前位置: 首页 > 资源下载  > 手机网站模板 > 其他

APP-引导页+官方示例

2020/1/8 22:36:12 人评论

uni-imaring-GuidePages复制代码基于uni-app框架的swiper组件打开的时候启动。首次启动展示引导页,之后启动不再展示。那么就意味着,我们需要一个标识来确定,App是否已经启动过。我们可以在本地存储一个key来做为已经启动过App的标识。那么,我们在入口这里,就可以读取…

uni-imaring-GuidePages

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

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

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

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

目录结构

复制代码index.vue //入口页guide.vue //引导页pages/tabBar/component/component.vue //首页

一、引导页

存储key

向本地存储中设置launchFlag的值,即启动标识;

获取key

向本地存储中设置launchFlag的值,即启动标识;

获取本地存储中launchFlag的值

若存在,说明不是首次启动,直接进入首页;

若不存在,说明是首次启动,进入引导页;

复制代码    try {        const value = uni.getStorageSync('launchFlag');        if (value) {            if (value == true) {
                uni.switchTab({                    url: '/pages/tabbar/tabbar-1/tabbar-1'
                });
            } else {
                uni.redirectTo({                    url: '/pages/index/guide'
                });
            }
        } else {
            uni.setStorage({                key: 'launchFlag',                data: true
            });
            uni.redirectTo({                url: '/pages/index/guide'
            });
        }
    } catch(e) { 
        // error 
        uni.setStorage({ key: 'launchFlag', 
            data: true
        }); 
        uni.redirectTo({ 
            url: '/pages/index/guide' 
        }); 
    }

首页清除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('用户点击取消');
            }
        }
    });

运行方式

将文件解压拖入HBuilder X ,运行项目即可。

模板演示地址:http://www.ui92.com/demo/html/

下载地址

  • 预览 下载

    imaring-GuidePages_1.2.2.zip

    文件类型:zip 大小: 802KB 下载: 所需积分:1

相关资源

  • 肺炎疫情大数据手机页面

    以2012年的肺炎疫情为背景做的,移动端地图和折线图,数据统计图表手机页面模板。武汉加油!中国加油!

    2020/2/18 15:40:32
  • 视频影视网站手机端模板

    一款简单通用的视频影视网站,影视快播手机网页模板。内含首页,影视分类页,电影详情页,搜索页等总共4个html页面下载。

    2020/2/18 15:32:31
  • 伴你健身课程微信手机模板

    一套比较全面的健身服务平台,伴你健身手机app,健身课程训练小程序手机站模板html下载。包含:课程详情、私教详情、订单详情、优惠详情、个人资料、我的预约、我的退款、我的优惠卡等等全站31个手机页面。

    2020/2/3 11:13:51
  • 手机App登录注册

    很简单的,我觉得没什么必要多讲,就简单的登录和注册界面模板,页面比较简洁。v1.1.0(2019-06-04)应网友要求,已增加了一个注册验证码倒计时页面,文件路径: pages/zaizai-checking/index.vue 注释写的很详细了哦。加了一个按钮点击效果,可自行扩展,有写注释v1.0.1…

    2020/1/8 22:41:58

共有条评论 网友评论

验证码: 看不清楚?