一、启动页和引导页的概念
“启动页”（splash）：app的启动界面，每次启动都会看到的（每次打开QQ都会看到一只企鹅）。
“引导页”（guide）：guide是否展示是可控的，通常首次启动时显示，从第二次启动开始，引导页就不再显示，而是直接进入App主界面了。
二、启动页的设置
-
在manifest.json文件中
在manifest.json文件的“启动图片（splash）配置”里设置，可以设置“延时关闭启动界面”或者“手动关闭启动界面”，实际开发中，通常需要设置手动关闭splash（HBuilder7.1版本后，启动界面不调用此方法超过6秒后会自动关闭）。 -
在main.html文件中
手动关闭启动页的代码plus.navigator.closeSplashscreen();
二、引导页的设置
1.在index.html中：
按照Hello mui启动页的逻辑，首次启动展示引导页，之后启动不再展示。那么就意味着，我们需要一个标识来确定，App是否已经启动过。我们可以在本地存储一个key，（如下例launchFlag），来作为已经启动过App的标识。在入口index.html中，就可以读取这个key，来决定是否展示引导页。
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>
- 在guide.html中：
我们需要放置我们想要展示的内容，利用mui的slider组件，来制作一套引导信息。
如果使用图片的话，建议大家按照iPhone6 Plus的尺寸制作（其实就是往大了做），然后利用5+提供的方法计算屏幕正确的宽高，设置图片的宽高来撑满屏幕。
在最后一个引导界面提供一个App主界面入口，也就是“开始体验”这种按钮。（点击“开始体验”的同时，设置表示App已经启动过的标识。）
<!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="images/1.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="images/2.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;">
<img class="guide-img" src="images/3.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="javascript:;"><!--javascript: 是一个伪协议,javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。-->
<img class="guide-img" src="images/4.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>
注意：关于及
：
”javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。
：
href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新。这是一个锚链接。
如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题。而使用href=“javascript:;” 就可以避免页面的乱跳！所以，如果我们想要写一个死的a标签，使用会更有利于增加我们的页面的用户友好度！
如果引导页不能流畅切换，可以参见http://www.cnblogs.com/nangong/p/7e3200a9374c993a1e94b3005ee2a71e.html
感谢分享https://blog.csdn.net/sophiafei_2000/article/details/78142162