Trust
Trust
  • 发布:2016-07-26 15:49
  • 更新:2019-04-02 09:27
  • 阅读:31177

【示例】App引导页的制作

分类:HTML5+

注意:本文为5+App的引导页制作方法,uni-app另行制作,推荐使用nvue制作,也可以参考插件市场已经封装的插件https://ext.dcloud.net.cn/plugin?id=192

启动页和引导页

首先澄清一下“启动界面”(splash)和“引导页”(guide)的概念,因为许多刚接触App开发的朋友会搞不清楚这两者分别是什么。
以Hello mui为例,第一次打开的时候是这样的:


首屏中MUI字样的图片就是splash,后面几个切换动画的界面则是guide。从第二次开始,再打开就直接进入App主界面了。
splash是每次启动都会看到的(每次打开QQ都会看到一只企鹅),但是guide是否展示是可控的(微博启动后经常会有广告页)。
ps:目前还不支持移除或动态设置splash。

示例实现

切回正题,一起来看一下类Hello mui这种引导页如何利用MUI&HTML5+进行制作。

App入口页

按照Hello mui这种启动页的逻辑:首次启动展示引导页,之后启动不再展示。那么就意味着,我们需要一个标识来确定,App是否已经启动过。
通过5+的storage模块的方法,我们可以在本地存储一个key来做为已经启动过App的标识。那么,我们在入口这里,就可以读取这个key,来决定是否展示引导页。

var launchFlag = plus.storage.getItem("launchFlag");  
if(launchFlag) {  
    mui.openWindow({  
        url: "main.html",  
        id: "main",  
        extras: {  
            mark: "index" //额外的参数,仅仅是个标识,实际开发中不用;  
        }  
    });  
} else {  
    mui.openWindow({  
        url: "guide.html",  
        id: "guide"  
    });  
}  

手动关闭splash

实际开发中,通常需要设置手动关闭splash(HBuilder7.1版本后启动界面不调用此方法超过6秒后会自动关闭),来控制App内容展示的时机。防止入口判定逻辑未结束就进行展示,造成白屏。

引导页

利用mui的slider组件,来制作一套引导信息。
如果使用图片的话,建议大家按照iPhone6 Plus的尺寸制作(其实就是往大了做),然后利用5+提供的方法计算屏幕正确的宽高,设置图片的宽高来撑满屏幕。相关文档及示例:
Screen模块管理设备屏幕信息
获取系统状态栏高度
深入理解高度。获取屏幕、webview、软键盘高度

var sh = plus.navigator.getStatusbarHeight();  
var h = plus.screen.resolutionHeight;  
var w = plus.screen.resolutionWidth;  
var imgs = document.querySelectorAll(".guide-img");  
for(var i = 0, len = imgs.length; i < len; i++) {  
    imgs[i].style.height = (h - sh) + "px";  
    imgs[i].style.width = w + "px";  
}  

在最后一个引导界面提供一个App主界面入口,也就是“开始体验”这种按钮。点击“开始体验”的同时,设置表示App已经启动过的标识。

plus.storage.setItem("launchFlag", "true");  

主界面

从第二次开始,启动应用直接进入主界面。

在主界面,额外提供了一个清除已经启动信息重启应用的功能,方便大家进行测试。

广告页

广告页其实也可以算是guide,只不过它引导的是广告信息。广告页只会在适当的时机出现,这个时机是由后端来决定的(通常情况下)。
广告页制作的逻辑:
1、入口处向后端发起请求,来得知是否存在广告;
2、若存在,则同时获取广告内容等信息;
3、广告内容按照固定的模板进行渲染,完成后关闭splash;
4、广告页持续特定的时间(通常就3-5秒)或提供按钮关闭,进入App主界面。

源码

附上源码,真机运行即可。

25 关注 分享
lsvih 赵梦欢 小云菜 若末lan 6***@qq.com DullaHank 疯狂的二进制 小米稀饭大米粥 fategaga ruogu skysowe sonpu 中半简空糖 lhyh onlyhy l丶yc 3***@qq.com 1***@qq.com 1***@qq.com BJ_Q 虫雪浓 8***@qq.com 3***@qq.com 睡不醒哎 tyro

要回复文章请先登录注册

YHJ木易

YHJ木易

uniApp引导页源码示例:https://ext.dcloud.net.cn/plugin?id=192
2019-04-02 09:27
FYC

FYC

学习一下
2018-06-15 13:23
l丶yc

l丶yc

............
2018-03-05 08:03
G_Pig

G_Pig

如何又有启动页 又有引导页啊??
2017-10-16 11:30
3***@163.com

3***@163.com

帮了我大忙了
2017-10-11 11:27
ruogu

ruogu

文章咋收藏呢 ? app引导页
2017-07-20 23:38
付楚

付楚

回复 三月 :
嗯嗯 、。
2017-06-06 18:25
三月

三月

回复 付楚 :
解决了,看官方的
2017-05-25 17:08
1***@qq.com

1***@qq.com

回复 三月 :
官方的低端机上也会闪的
2017-04-17 16:22
三月

三月

解决了,看官方的。
2017-04-12 17:56