导读：在制作引导页之前，先澄清一个概念。启动界面和引导页是两个东西，就拿hello mui为例，我们第一次打开的时候是这样的：首屏那个MUI字样的...
在制作引导页之前，先澄清一个概念。“启动界面”和“引导页”是两个东西，就拿hello mui为例，我们第一次打开的时候是这样的：
首屏那个MUI字样的图片，叫做“启动界面”，后面的几个slider叫做“引导页”。而且，目前还不支持动态设置启动界面，但是引导页是html文件，里面的内容是我们自己可以动态控制的。
回归正题，下面我们开始制作常规的引导页。
一、index.html
入口页，是做为一个逻辑判定的入口。通过读取本地的数据存储来判定是否第一次启动应用，进而决定加载哪个页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>入口页面</title>
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: black;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
/**
* 获取本地存储中launchFlag的值
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem
* 若存在，说明不是首次启动，直接进入首页；
* 若不存在，说明是首次启动，进入引导页；
*/
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"
});
}
});
</script>
</body>
</html>
在这之前，我们还需要做一件事，那就是把启动界面设置为手动关闭，但是如果启动6秒后依旧没有手动关闭，它还是会自动关闭的，这个文档中有详细的说明。
二、guide.html
引导页，我们需要放置我们想要展示的内容，然后提供一个应用的入口，也就是“开始体验”这种按钮。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: black;
}
.guide-img {
width: 100%;
}
#start {
position: absolute;
bottom: 40px;
width: 60%;
left: 20%;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="image/yuantiao.jpg">
<button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">开始体验</button>
</a>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
/**
* 获取系统状态栏高度
* http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
*/
var sh = plus.navigator.getStatusbarHeight();
/**
* 获取设备屏幕高度分辨率以及宽度分辨率
* http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight
* http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth
*/
var h = plus.screen.resolutionHeight;
var w = plus.screen.resolutionWidth;
/**
* 设置图片高度，这里图片并不规范；
* 实际开发中，建议大家制作iphone6plus规格的图片；
*/
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";
}
/**
* 手动关闭启动页
* http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen
*/
plus.navigator.closeSplashscreen();
document.getElementById("start").addEventListener("tap", function() {
/**
* 向本地存储中设置launchFlag的值，即启动标识；
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
*/
plus.storage.setItem("launchFlag", "true");
mui.openWindow({
url: "main.html",
id: "main",
extras: {
mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
}
});
});
});
/**
* 重写mui.back()，什么都不执行，反之用户返回到入口页；
*/
mui.back = function() {};
</script>
</body>
</html>
三、main.html
第二次启动应用，会直接进入主界面的。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell" id="reset_launch">
<a class="mui-navigate-right">重置首次打开app</a>
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
/**
* 手动关闭启动界面
*/
plus.navigator.closeSplashscreen();
/**
* 获取当前窗口对象，并取我们之前传过来的标识；
*/
var self = plus.webview.currentWebview();
var mark = self.mark;
/**
* 自动消失提示，位置为top；
* http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastOption
*/
plus.nativeUI.toast("我是从" + mark + "页面进来的", {
verticalAlign: "top"
});
document.getElementById("reset_launch").addEventListener("tap", function() {
/**
* 系统确认对话框
* http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.confirm
*/
plus.nativeUI.confirm("是否重置首次打开app？", function(event) {
/**
* 按钮的索引，从0开始；
*/
var index = event.index;
if(index == 0) {
/**
* 通过key值删除键值对存储的数据
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.removeItem
*/
plus.storage.removeItem("launchFlag");
/**
* 自动消失提示，位置为center；
* http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastOption
*/
plus.nativeUI.toast("重置成功，2秒后重启app。", {
verticalAlign: "center"
});
/**
* 2秒后重启应用
* http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.restart
*/
setTimeout(function() {
plus.runtime.restart();
}, 2000);
}
}, "重置启动", ["重置", "放弃"]);
});
});
/**
* 重写mui.back()，一秒内连续点击两次，退出应用，仅安卓有效；
*/
var first = null;
mui.back = function() {
if(!first) {
first = new Date().getTime();
/**
* 自动消失提示信息
* http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
*/
plus.nativeUI.toast("再按一次退出应用");
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
/**
* 退出应用，仅安卓有效；
* http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
*/
plus.runtime.quit();
}
}
};
</script>
</body>
</html>
主界面，也就是正式进入应用了。为了方便大家测试体验，提供了一个清楚首次启动信息，并重启应用的功能。
四、实际开发中的扩展
许多同学会问，启动应用后的广告页怎么制作。引导页都会做了，广告页还能不会？不就是把引导页的内容，换成你广告的内容嘛。
不过需要注意的一点就是，index.html里面的页面跳转逻辑是关键。
如果你每次打开应用，都要展示广告，那么index.html的逻辑判定就可以忽略掉，入口页直接放置广告即可；如果你是偶尔需要放置广告页，那么index.html页面需要做的就是向后端发起请求（实现动态展示广告的一种方案），来决定是否放置广告，从而进行页面的正确跳转。
总之，无论是引导页还是广告页，入口页面的逻辑判定才是关键，一定要按照自己的实际业务需求来进行正确的跳转和展示。
最后还请大家多多指教，补充意见。附上源码，真机运行即可。
guide.zip
