wap2app（三）-- 添加引导页
1.在client_index.html文件中添加如下代码：
<script type="text/javascript">
if(window.plus){
plusReady()
}else{
document.addEventListener('plusready',plusReady,false)
}
function plusReady(){//这里是每次进入应用都会显示引导页，开发中要如何显示引导页视具体的情况而定。
var guide = plus.webview.create('guide.html',"guide");
guide.show();
}
</script>
2.创建image文件夹，添加引导图的图；创建css文件夹，引入mui.min.css、mui.css；创建js文件夹，引入mui.js文件、mui.min.js文件等。
3.添加引导页面 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>
注意：要将guide.html中的mui.openWindow的url替换成你的首页地址，可以是根目录下的地址，也可以是网络地址（http://或https://开头），如：
mui.openWindow({ url: "", //mian.html 或者如 https://www.baidu.com/ id: "main", extras: { mark: "gudie" //同样，这里也只是个标识，实际开发中并不用； } });
以上执行完毕之后，便可在真机上运行，查看引导图页面效果。
这里是每次进入应用都会显示引导页，开发中要如何显示引导页视具体的情况而定。
如需要只在首次出现引导图：
在client_index.html文件中：
var launchFlag = plus.storage.getItem("launchFlag"); if(launchFlag == true) { //非首次 } else if(!launchFlag){ //首次 var guide = plus.webview.create('guide.html',"guide"); guide.show(); }
并在guide.html中添加 launchFlag的标签设置，向本地存储中设置launchFlag的值，即启动标识；在每次引导图点击立即使用是将标签设置为true：
plus.storage.setItem("launchFlag", "true");
以上，即可实现引导图的效果。
那么，怎么在引导图中添加分页器，写分页器主要是能监听滑动的事件，只要能监听到滑动事件，那么在滑动时添加分页器的高亮即可。
查阅资料知道，当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引，于是监听slide事件：
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
alert(event.detail.slideNumber);
});
然后写一个分页器：
<div class="guide-pages"> <ul> <li class="li-guide active" id="li-guide0"></li> <li class="li-guide" id="li-guide1"></li> <li class="li-guide" id="li-guide2"></li> <li class="li-guide" id="li-guide3"></li> </ul> </div>
css:
.guide-pages{ position: absolute; left: 50%; bottom: 17px; width: 120px; margin-left: -80px; text-align: center; } .li-guide{ display:block; float: left; width:10px; height: 10px; background-color: #000; margin-left: 5px; margin-right: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; opacity: 0.3; } .li-guide.active{ opacity: 1; background-color: #3478f6; }
js:
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
document.querySelector(".active").classList.remove("active");
var this_id = "li-guide" + event.detail.slideNumber;
document.getElementById(this_id).classList.add("active");
});
以上，即可实现分页器。
附：
官方文档地址：http://ask.dcloud.net.cn/article/13011
git地址：https://github.com/erinwxl/wap2app-guide
整理不易，转载时请注明出处及相应链接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/9848553.html，文章标题备注转载，如：xxx【转载】,谢谢！
