关于uni-app:uniapp开发App引导页

31次阅读

共计 1057 个字符,预计需要花费 3 分钟才能阅读完成。

App 的疏导页是当用户第一次关上一款 App 时所展现的 3 - 5 精美的图片,用于告知用户产品的性能及特点。好的疏导页会促使用户对产品减少更多的趣味,当然这是 UI 设计的能力体现了,只管很多人都会疾速的滑过。对于开发人员怎么去增加这几张图片只有在用户第一次关上 app 时展现呢。

其实原理很简略,在本地设置标识 flag,默认为 false,从而进入疏导页,进入之后,flag 设置为 true,下次进入天然不会展现的;当然这个疏导页能够设置为一个页面,用轮播图搁置几张疏导页;只有不革除本地的 flag 缓存,则疏导页只会呈现一次;

以 uniapp 开发的我的项目为例:在 onLaunch 函数中,查看 flag 是否为 false,如果为 false, 则跳转到疏导页面,在疏导页中可设置跳转到首页。留神,最好用 reLaunch,防止,用户物理按键返回;为 true,则存储 flag 到本地。原理既是如此;然而理论开发时,会发现,存在闪屏景象,这样用户的体验就不太好,所以比拟要害的中央就在于这块,还是以 uniapp 为例,须要在 uniapp 的源码视图下将 splashscreen 的设置进行批改,将 autoclose 改为 false,在 onLaunch 中通过设置延迟时间调用 plus.navigator.closeSplashscreen 办法来敞开启动图。delay 设置为 0。这样启动图的设置就 ok 了。
以下封装了查看是否进入疏导页的办法,仅供参考下:

guidePage(){
    try {
         // 获取本地存储中 launchFlag 标识
         console.log(uni.getStorageSync('first_flag'))
         if(!uni.getStorageSync('first_flag')){// 第一次进入 app, 为 false
            // 进入疏导页
            uni.reLaunch({url:'/pages/GuidePage/GuidePage',})
        }
    } catch(e) { //error
        // 设置为 true
        uni.setStorageSync('first_flag', true);
    }
}

Tip: 在屡次的利用中发现,如果在手机自身比拟卡的状况下,用户在第一次开启 app 时,还是会存在首页在疏导页之前呈现,这种状况的解决形式是将疏导页默认设置为主页,即在路由治理中,将疏导页写在第一个,而后通过 flag 去判断是否跳转到首页;
以上的疏导页开发只是提供一种思路,还有很多其余的形式,比方后端去管制是否展现疏导页,疏导页的动态变化。当然问题自身不难实现,关键在于理论利用时所存在的问题。

正文完
 0