hubilder--01---引导页面的制作
2017-04-03 本文已影响281人
乡水情缘
用户第一次安装应用的时候都会有一个引导页面,下面就简单的说说如何通过hbuilder来制作一个简单的引导页面
重点是要有一个状态来记录APP是不是第一次安装,如果是第一次安装需要展示引导页,如果不是第一次安装则不展示引导页,那么这地方我们就需要一个记录状态,这地方我们使用的是
plus.storage.setItem("lauchFlag", "true");
来记录这个状态
下面来说一说整个实现的流程
第一步:我们需要在入口界面的,检测是否需要展示引导页面
mui.plusReady(function(){
//引导页面
launchScreen();
以下的代码是创建的tabar代码 (以后会介绍到)
.
.
.
})
检测是不是第一次启动的代码
function launchScreen() {
//读取本地存储，检查是否为首次启动(当然这个值需要在进入APP之后存储下来的)
var showGuide = plus.storage.getItem("lauchFlag");
if(showGuide){
//有值，说明已经显示过了，无需显示；
//关闭splash页面；
plus.navigator.closeSplashscreen();
//设置全屏
plus.navigator.setFullscreen(false);
}else{
//打开引导页面
mui.openWindow({
id:'guide',
url:'guide.html',
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
}
}
第二步: 使用slider 来写一个引导页面(当然这个页面也可以自己根据自己的需求定制),整个页面的代码如下:
<!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>
#close {
position: absolute;
width: 160px;
height: 44px;
left: 50%;
margin-left: -80px;
bottom: 15%;
padding: 10px;
color: #fff;
border-color: #fff;
}
.mui-slider-item{
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen" >
<!--mui-slider-loop 这个字段是控制是否可以无限的滚动-->
<div class="mui-slider-group">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
// mui.back = function() {};
mui.plusReady(function() {
plus.navigator.setFullscreen(true);
plus.navigator.closeSplashscreen();
});
//立即体验按钮点击事件
document.getElementById("close").addEventListener('tap', function(event) {
//存储是否是第一次进入APP的状态
plus.storage.setItem("lauchFlag", "true");
plus.navigator.setFullscreen(false);
plus.webview.currentWebview().close();
}, false);
</script>
</body>
</html>
注:以上代码copy下来可以直接使用,在此就不提供demo了,有需求的小伙伴可以添加 qq 1198928367 ,欢迎大家来交流
