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，