html5 做app引导页怎么做

H5edu教育Html5开发为您解答：

1、制作html5引导页面。

2、把做好的页面放入Android工程中assets文件夹下。

3、利用WebView加载asset文件夹下的html文件。

4、在引导页最后一页的按钮上捕捉点击事件，结束引导页，进入程序。

写过一些纯H5的APP，虽然开发起来的确很快很舒服，但和原生比起来纯H5APP还是有很多问题，主要聚集在以下几个方面：

1、动画

动画有很多种，比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等，在H5之下的众多实现方法都没有办法达到纯原生的性能。一般这些的话有几种不同的选择：css3动画，javascript动画，原生动画。

css3动画非常的消耗性能，如果某一个元素用到css3动画可能还看不出来，但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架调用底层的动画，但不管怎么样等于在原来的代码上包上了一层，性能还是不可避免的受到影响。

比如在一个新页面的载入上，如果调用底层动画要考虑的问题有两个，一个是本身资源页面的渲染问题，另一个是远程数据的获取。即便是这些动画能够很快的响应，但大量的css页面会导致渲染卡顿，滑入时可能会有白屏/机器卡顿的现象。为了解决这些性能问题又必须要用到预加载或模拟动画。即便是这样，滑入滑出的动画在低端的安卓机器上还是有很多问题，如果获取服务端数据处理的方式不合适，卡顿白屏的现象会更严重。具体看下面的数据获取方式。

2、获取服务端数据

首先要接受的是，这里的数据获取都是在资源页面上异步完成的，因为只有这样才能让这些资源页面完成预加载或者渲染。但是异步拿到的数据在填入页面中时可能会涉及DOM *** 作，众所周知，DOM *** 作非常消耗性能，如果页面小还好，页面稍大数据稍微复杂一点，频繁的DOM *** 作会导致明显的闪白。

而且最重要的一点是，如果页面加载进来之后数据更新的速度太慢，也会让页面模板等待很长时间，对用户体验又不友好，总不能每次打开都像浏览器一样等待刷新是吧。

这个问题如果没有得到解决，H5APP是很难承担大规模数据的页面，在它们之中频繁切换更是难上加难，那么肯定有人也会想到用MVVM的方式，其实我也写过一些基于MVVM的H5APP，相对来说它们获取数据和更新数据的方式更敏捷更科学，但写的过程中又要注意很多H5独有的问题，这些问题在下面的页面切换里来讲。

3、页面切换

上面我们看到了几种不错的实现方式，比如预加载和模拟动画，甚至有批量的预加载，批量的截图模拟动画等等，虽然看起来很友好解决了不少问题，但事实上如果页面足够多就会引发另一个问题：页面的生存周期。

试想一下，如果引导页或者主页面缓存了5个子页面的资源，在跳转到响应的子页面时又会缓存这些子页面的下级页面资源，如此反复肯定会占据大量内存使APP的体验下降。那么怎么知道那些页面是需要的，最多缓存多少页面，什么时候结束哪些页面的生存周期呢？在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答，因此在页面较多内容较多的APP中可能会因这些资源分配的问题降低性能。

这时候我们回过头来再看看MVVM的数据加载问题，实际上不管哪个MVVM框架，写过的人都知道管理这种新型的前端代码最重要的问题是内存的问题，你既要保证代码写的足够优雅没有任何内存泄露问题，也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放，这对全局有没有什么影响，在多个请求时也要合理的分配资源，甚至是复用这些父级页面传过来的缓存资源等等。较小的APP可能并不会有这些问题，如果你想用纯H5来开发大型APP，这很可能会浪费你很多时间——而且结果还不会让你满意。

4、Android/iOS的区别

很多人都说纯H5APP一次编写就能编译Android/iOS两种不同的APP，大大降低了成本。实际上这个观点本身就是值得怀疑的，如果你写过这类APP就能明白我在说什么，它们既不省事，又存在很多BUG，调试时尤其繁琐。

举一个很简单的例子，Android和iOS在返回上一页的处理方式上就有明显的区别，iOS的顶部bar在全屏下怎样处理，Android机器出现smart bar怎样处理页面的布局，调用底层硬件时怎样区分不同的场景等等，你需要写一个又一个机型和系统的判断，然后分别在Android和iOS下调试，最后你却发现这并没有卵用，累的要死却什么没学到，只有一堆不知道什么时候会过时的经验。

现在做H5混合APP开发的人很多，但是纯H5却很年轻，很多问题都没有很好的解决，这几个是我在做这些APP时考虑最多的问题。当然大家也不必担心，随着ES6的推行，硬件发展越来越快，纯H5APP未必没有一席之地。最后说一个很少人注意到的H5优势，大家大谈H5APP时都是快速开发、低成本、多平台等等，但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。

正是这些复杂多变的CSS样式消耗了性能，但是它带来了排版的多样性，能够细致到每一个字宽行高和风格的像素级处理，才是H5的优异之处。

北大青鸟web前端怎么样?要学习哪些课程?首先我们需要明白，web前端是能干什么呢?web前端工程师就是用HTML5、CSS3、JavaScript、jQuery、Ajax等技术把UI设计的页面效果做成网页，结合Bootstrap、AngularJS等JS框架和后台开发工程师搭线，实现让大家看到的电商平台上那些动人的精美页面。

简单来说，当你打开某个页面或者网站时，你会发现很多都是高端炫酷的动态页面。

Web前段就是负责形成这种动态效果的，也就是说，如果没有前端技术的加持，这些页面就仅仅只是停留在设计层面。

北大青鸟web前端怎么样?要学习哪些课程?北大青鸟校区web前端在专业的知识上主要分为四个阶段：

第一阶段：从零基础到PC端整站页面开发(HTML/CSS全学习+JS初级)行业入门与DW软件介绍、DIV+CSS样式及网页布局、HTML超文本标记语言与页面实战、CSS样式与页面实战、DIV+CSS盒模型与HTML/CSS实战、元素显示类型与浮动CSS浮动、CSS定位、浏览器兼容、JavaScript初级。

第二阶段：适配于IOS/Android移动端整站开发、(HTML5/CSS全进阶+JS中级)、JavaScript中级、HTML5初级(HTML5基本标签，HTML5新增标签，canvas标签的使用，canvas动画案例)、CSS3初级(CSS3样式基础，CSS3盒模型，CSS3新增UI样式，移动端网站案例制作)

第三阶段：微信端微场景HTML5动态页面制作(HTML5/CSS高阶+JS高阶)、JavaScript高阶(运动框架)、JavaScript高阶(时间版运动)、HTML5/CSS3高阶应用(HTML5中canvas库jCanvaScript.1.5.18.min应用，HTML5音视频讲解，入场，动画的原理和制作，手机引导页动画案例)、HTML5+CSS3高阶应用与移动端案例实 ***

第四阶段：响应式个人网站开发(前端工程师高阶与框架应用)。

随着互联网竞争不断深化，特别是电商领域的互联网项目不断兴起之后，激烈的竞争让这里面的玩家对于用户体验提出了更高的要求，用户体验甚至成为了胜负的关键，也因此让前端开发走到台前，成为一个必须的开发工种，现在学web前端，无疑是明智的选择!

---