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