app欢迎页面代码示例

2016-12-24 mubrand mui

首先是欢迎页面内容,一般是轮播图之类的。


<!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”,这块可以做成动态,这样就不用每次更新欢迎页还得更新版本了


标签: hbuilder mui

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1