在制作引导页之前,先澄清一个概念。“启动界面”和“引导页”是两个东西,就拿hello mui为例,我们第一次打开的时候是这样的:
首屏那个MUI字样的图片,叫做“启动界面”,后面的几个slider叫做“引导页”。而且,目前还不支持动态设置启动界面,但是引导页是html文件,里面的内容是我们自己可以动态控制的。
回归正题,下面我们开始制作常规的引导页。
一、index.html
入口页,是做为一个逻辑判定的入口。通过读取本地的数据存储来判定是否第一次启动应用,进而决定加载哪个页面。
在这之前,我们还需要做一件事,那就是把启动界面设置为手动关闭,但是如果启动6秒后依旧没有手动关闭,它还是会自动关闭的,这个文档中有详细的说明。
二、guide.html
引导页,我们需要放置我们想要展示的内容,然后提供一个应用的入口,也就是“开始体验”这种按钮。
三、main.html
第二次启动应用,会直接进入主界面的。
主界面,也就是正式进入应用了。为了方便大家测试体验,提供了一个清楚首次启动信息,并重启应用的功能。
、实际开发中的扩展
许多同学会问,启动应用后的广告页怎么制作。引导页都会做了,广告页还能不会?不就是把引导页的内容,换成你广告的内容嘛。
不过需要注意的一点就是,index.html里面的页面跳转逻辑是关键。
如果你每次打开应用,都要展示广告,那么index.html的逻辑判定就可以忽略掉,入口页直接放置广告即可;如果你是偶尔需要放置广告页,那么index.html页面需要做的就是向后端发起请求(实现动态展示广告的一种方案),来决定是否放置广告,从而进行页面的正确跳转。
总之,无论是引导页还是广告页,入口页面的逻辑判定才是关键,一定要按照自己的实际业务需求来进行正确的跳转和展示。
最后还请大家多多指教,补充意见。附上源码,真机运行即可。