html app启动页制作,【示例】App引导页的制作
注意:本文为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主界面。
源码
附上源码,真机运行即可。
html app启动页制作,【示例】App引导页的制作相关推荐
- Flutter实战01 - 启动页 闪屏广告 引导页
一个app通常都会有一个App通常都会有SplashPage页面,在这页面包含启动页.引导页(app简介说明).闪屏广告页(点广告页跳转到相应H5页面). 在Flutter实现引导页需要在Materi ...
- android app启动 控制器,应用控制器app下载-应用控制器(整合70多个超强功能)下载V1.96安卓版本-西西软件下载...
应用控制器(整合70多个超强功能)是一款非常好用的应用控制管理app,通过应用控制器app即可体验内存清理.阻止运行.强行打盹等功能,该软件可以轻松控制手机内所有软件的使用权,无需root权限就可以停 ...
- android app启动失败,Android应用App启动白屏(黑屏)问题解决
Android应用App启动白屏(黑屏)问题解决 点击Android手机桌面的应用App icon图标后,Android启动这个应用,正常情况下会立即看到并进入到开发者自己写在MainActivity ...
- android用户引导页,android欢迎界面引导页
android欢迎界面是所有程序开始的一个简短的自我介绍,让用户能够通过简单的描述和图片信息更好的了解软件,对用户体验效果非常的重要.这里我会使用VIewPager做一个欢迎界面. 1设计背景图片 根 ...
- html app启动页制作,APP引导页制作
原因: 在APP中经常见到,第一次启动的时候,有三张或者更多图片来回切换,介绍此APP的使用方法或做广告!点确定,进入APP后,第二次启动APP就不会出现了!这个使用WeX5也很简单就实现了 解决方案 ...
- 打造APP引导页3D切换特效
众所周知,一款好的APP,肯定有个很炫的APP引导页或者一个启动页,一个很炫的APP的引导页,肯定会为你的APP瞬间提高逼格,使得APP的用户体验瞬间倍增.那么接下来就给出一个API(setPageT ...
- viewpager 的工具类,内置多种指示器,能够帮你快速完成,轮播图,app 引导页,viewpager 的 tab 指示器等等
ViewPagerHelper 项目地址:LillteZheng/ViewPagerHelper 简介:这是一个,viewpager 的工具类,内置多种指示器,能够帮你快速完成,轮播图,app 引导 ...
- 仿制慕课网app实现斗鱼,全民k歌视频引导页(ViewVideoViewPaper)炫酷效果
在几个月前,我第一次玩全民k歌,下载完app,它弹出来的引导页吸引了我,不像以前的引导页一样千篇一律,而是用了视频的方式,用一种动态的方式来实现.在今天,我突然又想起了这个效果,就抽出了一点时间在网上 ...
- android启动页背景设置,Android APP启动页白(黑)屏问题及解决方法
一.引言 使用Android智能手机用户都有碰到过,当一个APP启动时,有的APP启动界面会首先展示一个白屏或者黑屏,然后再进入欢迎页,稍作停留最后进入APP主页. 这个白屏或者黑屏的问题真的很影响体 ...
- 如何做好App的引导页?(转)
http://uedc.163.com/12264.html 当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响 ...
最新文章
- ad怎么批量改元器件封装_Altium Designer 批量修改元件封装的方法(修正)
- WCF实例 - 简介
- SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
- 七台河计算机网络工程专业,网络工程本科专业介绍
- JsTree实现简单的CRUD
- 自己做的一个小demo
- BZOJ3938 UOJ88:[集训队互测2015]Robot——题解
- 深度学习推荐模型-WideDeep
- 阿里云linux主机更新hostname
- 国内在线查看Java源码(支持下载)
- 音视频基础知识---视频编码格式
- FileZilla工具FTP乱码问题修改
- 技术书是怎么写出来的
- adb命令 激活并设置默认输入法
- 清明2013——祭父
- 技巧 | 清理电脑垃圾
- 概率编程——未来也可以这样预测
- 程序员离职原因的最佳回答_员工离职了还将公司的代码盗走做开发!还挖走程序员!...
- VS C++ error LNK2005 1169报错
- 邮箱POP3及SMTP服务器地址大全
热门文章
- 拨打上述范围的电话或手机免费
- android必备软件!零基础如何成为高级Android开发,薪资翻倍
- linux编译ipp多线程,Linux 下 Intel IPP 模块编译
- HashMap原理以及TreeMap和Collections工具类(2022.6.10)
- android相机权限xml,Android相机权限检测兼容问题
- 【Python】天气预报(发送网易邮件,微信公众测试号,企业微信),周末用时一天,两万字代码,纯肝货(完整项目)一一CSDN21天学习挑战赛
- 使用Spring Security Oauth2 和 JWT保护微服务--资源服务器的编写
- 基于微信小程序评选投票系统 投票小程序毕业设计 毕业论文 开题报告和效果图
- angularjs2学习教程
- 个人ip如何运营?如何打造自己的个人ip?具体好处有哪些?