wap2app（三）-- 添加引导页
程序员文章站
2022-07-05 17:27:45
1.在client_index.html文件中添加如下代码： 2.创建image文件夹，添加引导图的图；创建css文件夹，引入mui.min.css、mui.css；创建js文件夹，引入mui.js文件、mui.min.js文件等。 3.添加引导页面 guide.html，代码如下： 注意：要将gu ......
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");
以上，即可实现效果。
附：
官方文档地址：
源码地址：