app欢迎页面代码示例
首先是欢迎页面内容，一般是轮播图之类的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/user_guid_page1@2x.png);">
</div>
<!-- 第二张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/user_guid_page2@2x.png);">
</div>
<!-- 第三张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/user_guid_page3@2x.png);">
</div>
<!-- 第四张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/user_guid_page4@2x.png);">
<button id='enter' class="mui-btn mui-btn-outlined">立即体验</button>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init();
(function($, doc) {
var enterButton = doc.querySelector('#enter');
enterButton.addEventListener('tap', function(event) {
plus.webview.currentWebview().close();
plus.storage.setItem("guide", plus.runtime.version);
}, false);
$.plusReady(function() {
plus.navigator.closeSplashscreen();
});
}(mui, document));
</script>
</body>
</html>
下方的点击事件是关闭欢迎页进入主页的过程。
还有一个要点，就是用户首次打开app的时候显示欢迎页，后期不需要，则在主页面用到以下代码：
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
//引导页面-0
var guide = plus.storage.getItem("guide");
if(guide) {
return;
} else {
mui.openWindow({
url: "guide.html",
id: "guide",
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'fade-in', //页面显示动画，默认为”slide-in-right“；
duration: 800 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
}
});
}
});
</script>
注意“guide”，这块可以做成动态，这样就不用每次更新欢迎页还得更新版本了
发表评论：