用戶第一次安裝應(yīng)用的時候都會有一個引導(dǎo)頁面,下面就簡單的說說如何通過hbuilder來制作一個簡單的引導(dǎo)頁面
重點是要有一個狀態(tài)來記錄APP是不是第一次安裝,如果是第一次安裝需要展示引導(dǎo)頁,如果不是第一次安裝則不展示引導(dǎo)頁,那么這地方我們就需要一個記錄狀態(tài),這地方我們使用的是
plus.storage.setItem("lauchFlag", "true");
來記錄這個狀態(tài)
下面來說一說整個實現(xiàn)的流程
第一步:我們需要在入口界面的,檢測是否需要展示引導(dǎo)頁面
mui.plusReady(function(){
//引導(dǎo)頁面
launchScreen();
以下的代碼是創(chuàng)建的tabar代碼 (以后會介紹到)
.
.
.
})
檢測是不是第一次啟動的代碼
function launchScreen() {
//讀取本地存儲，檢查是否為首次啟動(當然這個值需要在進入APP之后存儲下來的)
var showGuide = plus.storage.getItem("lauchFlag");
if(showGuide){
//有值，說明已經(jīng)顯示過了，無需顯示；
//關(guān)閉splash頁面；
plus.navigator.closeSplashscreen();
//設(shè)置全屏
plus.navigator.setFullscreen(false);
}else{
//打開引導(dǎo)頁面
mui.openWindow({
id:'guide',
url:'guide.html',
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
}
}
第二步: 使用slider 來寫一個引導(dǎo)頁面(當然這個頁面也可以自己根據(jù)自己的需求定制),整個頁面的代碼如下:
<!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">
<!-- 額外增加的一個節(jié)點(循環(huán)輪播：第一個節(jié)點是最后一張輪播) -->
<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的狀態(tài)
plus.storage.setItem("lauchFlag", "true");
plus.navigator.setFullscreen(false);
plus.webview.currentWebview().close();
}, false);
</script>
</body>
</html>
注:以上代碼copy下來可以直接使用,在此就不提供demo了,有需求的小伙伴可以添加 qq 1198928367 ,歡迎大家來交流
