在X5中已经内置了对app引导页面的支持，只要在你的首页同目录下有splashPage.html这个文件，就可以优先加载splashPage.html这页面的内容.接下来我们就做个简单里例子来看下引导页的效果。

首先我们做一个最简单的w页面。

intro1

 

然后我们在这个w页面的同目录放一个splashPage.html，内容大致如下

<div style="z-index: 9999; position: absolute!important; top: 0; bottom: 0; width: 100%; font-size: 0;"><iframe style="border: 0; height: 100%; width: 100%;" src="http://chuye.cloud7.com.cn/Cloud7BeginPage/50455" width="300" height="150"></iframe></div>
<script>// <![CDATA[
	function closeSplashPage(){
		/**
			如果只需要引导页面出现一次就设置参数为false
			如果需要每次都出现就不要设置
			如果后续有需求需要再次显示引导页就 localStorage.removeItem('splashPage');
		**/
		localStorage.setItem('splashPage','false');
		/**
		      通知首页关闭引导页
		**/
		window.parent.postMessage('splashPageClose','*');
	};
// ]]></script>
<div style="left: 50%; bottom: 100px; position: absolute; z-index: 10000;">跳过</div>

接下来访问页面页面看下效果,点击跳过后，后续重新进入页面就不会出现了。
intro

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443