MUI——App启动页与引导页

App启动页与引导页

1.启动页(splash):app的启动界面,每次启动都会看到的;
2.引导页”(guide):guide是否展示是可控的,一般首次启动时打开,以后直接进入App主界面

  • 启动页配置
    • 在manifest.json文件中[启动图配置],并且配置是否自动关闭,代码如下:
    {
        "plus" : {
            "splashscreen" : {
                "autoclose" : true, /*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/
                "waiting" : true /*是否在程序启动界面显示等待雪花,true表示显示,false表示不显示。*/
            }
        }
    }
  • 引导页配置
    • 展示可控,意味着就会有一个标识去判断是否为首次打开。标识本地储存,可参考Hello mui启动页,逻辑如下:
     mui.plusReady(function() {
         //读取本地存储,检查是否为首次启动
         var showGuide = plus.storage.getItem("lauchFlag");
         //仅支持竖屏显示
         plus.screen.lockOrientation("portrait-primary");
         if(showGuide) {
             //有值,说明已经显示过了,无需显示;
             //关闭splash页面;
             plus.navigator.closeSplashscreen();
             plus.navigator.setFullscreen(false);
             //预加载
             preload();
         } else {
             //显示启动导航
             mui.openWindow({
                 id: 'guide',
                 url: 'examples/guide.html',
                 styles: {
                     popGesture: "none"
                 },
                 show: {
                     aniShow: 'none'
                 },
                 waiting: {
                     autoShow: false
                 }
             });
             //延迟的原因:优先打开启动导航页面,避免资源争夺
             setTimeout(function() {
                 //预加载
                 preload();
             }, 200);
         }
     });
    • 在guide.html中做自己想做的功能,如多图轮播,使用mui的slide组件实现
    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Hello MUI</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">
            <style>
                #close {
                    position: absolute;
                    width: 160px;
                    left: 50%;
                    margin-left: -80px;
                    bottom: 15%;
                    padding: 10px;
                    color: #fff;
                    border-color: #fff;
                }
                .item-logo {
                    width: 100%;
                    height: 100%;
                    position: relative;
                }
                .item-logo a {
                    width: 200px;
                    height: 200px;
                    display: block;
                    border: 1px solid #FFFFFF;
                    border-color: rgba(255, 255, 255, 0.5);
                    text-align: center;
                    line-height: 200px;
                    border-radius: 50%;
                    font-size: 40px;
                    color: #fff;
                    position: absolute;
                    top: 15%;
                    left: 50%;
                    margin-left: -100px;
                }
                .animate {
                    position: absolute;
                    left: 0;
                    bottom: 15%;
                    width: 100%;
                    color: #fff;
                    display: -moz-box;
                }
                .animate h2 {
                    text-align: center;
                    margin-bottom: 20px;
                }
                .animate li {
                    width: 50%;
                    height: 30px;
                    line-height: 30px;
                    list-style: none;
                    font-size: 16px;
                    text-align: right;
                }
                .animate li:nth-child(3) {
                    text-align: left;
                    float: right;
                }
                .animated {
                    -webkit-animation-duration: 1s;
                    -webkit-animation-play-state: paused;
                    -webkit-animation-fill-mode: both;
                }
                .guide-show .bounceInDown {
                    -webkit-animation-name: bounceInDown;
                    -webkit-animation-play-state: running;
                    -webkit-animation-delay: 1s;
                    display: block;
                }
                .guide-show .bounceInLeft {
                    -webkit-animation-name: bounceInLeft;
                    display: block;
                    -webkit-animation-play-state: running;
                }
                .guide-show .bounceInRight {
                    -webkit-animation-name: bounceInRight;
                    display: block;
                    -webkit-animation-play-state: running;
                    -webkit-animation-delay: 0.5s;
                }
                @-webkit-keyframes bounceInDown {
                    0%, 60%, 75%, 90%, 100% {
                        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    }
                    0% {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -3000px, 0);
                        transform: translate3d(0, -3000px, 0);
                    }
                    60% {
                        opacity: 1;
                        -webkit-transform: translate3d(0, 25px, 0);
                        transform: translate3d(0, 25px, 0);
                    }
                    75% {
                        -webkit-transform: translate3d(0, -5px, 0);
                        transform: translate3d(0, -5px, 0);
                    }
                    90% {
                        -webkit-transform: translate3d(0, 3px, 0);
                        transform: translate3d(0, 3px, 0);
                    }
                    100% {
                        -webkit-transform: none;
                        transform: none;
                    }
                }
                @-webkit-keyframes bounceInLeft {
                    0%, 60%, 75%, 90%, 100% {
                        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    }
                    0% {
                        opacity: 0;
                        -webkit-transform: translate3d(-3000px, 0, 0);
                        transform: translate3d(-3000px, 0, 0);
                    }
                    60% {
                        opacity: 1;
                        -webkit-transform: translate3d(25px, 0, 0);
                        transform: translate3d(25px, 0, 0);
                    }
                    75% {
                        -webkit-transform: translate3d(-10px, 0, 0);
                        transform: translate3d(-10px, 0, 0);
                    }
                    90% {
                        -webkit-transform: translate3d(5px, 0, 0);
                        transform: translate3d(5px, 0, 0);
                    }
                    100% {
                        -webkit-transform: none;
                        transform: none;
                    }
                }
                @-webkit-keyframes bounceInRight {
                    0%, 60%, 75%, 90%, 100% {
                        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    }
                    0% {
                        opacity: 0;
                        -webkit-transform: translate3d(3000px, 0, 0);
                        transform: translate3d(3000px, 0, 0);
                    }
                    60% {
                        opacity: 1;
                        -webkit-transform: translate3d(-25px, 0, 0);
                        transform: translate3d(-25px, 0, 0);
                    }
                    75% {
                        -webkit-transform: translate3d(10px, 0, 0);
                        transform: translate3d(10px, 0, 0);
                    }
                    90% {
                        -webkit-transform: translate3d(-5px, 0, 0);
                        transform: translate3d(-5px, 0, 0);
                    }
                    100% {
                        -webkit-transform: none;
                        transform: none;
                    }
                }
            </style>
        </head>
    
        <body>
            <div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
                <div class="mui-slider-group">
                    <!-- 第一张 -->
                    <div class="mui-slider-item">
                        <div class="item-logo" style="background-color: #D74B28">
                            <a href="#">
                            MUI
                            </a>
                            <div class="animate guide-show">
                                <h2 class="animated bounceInDown">小巧高能</h2>
                                <li class="animated bounceInLeft">几十K的JS和CSS</li>
                                <li class="animated bounceInRight">上百种控件样式和模板</li>
                            </div>
                        </div>
                    </div>
                    <!-- 第二张 -->
                    <div class="mui-slider-item">
                        <div class="item-logo" style="background-color: #02C1ED;">
                            <a href="#">
                            MUI
                            </a>
                            <div id="tips-2" class="animate mui-hidden">
                                <h2 class="animated bounceInDown">原生UI</h2>
                                <li class="animated bounceInLeft">以iOS原生UI为基础</li>
                                <li class="animated bounceInRight">补充Android特有样式</li>
                            </div>
                        </div>
                    </div>
                    <!-- 第三张 -->
                    <div class="mui-slider-item">
                        <div class="item-logo" style="background-color: #67C962;">
                            <a href="#">
                            MUI
                            </a>
                            <div id="tips-3" class="animate mui-hidden">
                                <h2 class="animated bounceInDown">流畅体验</h2>
                                <li class="animated bounceInLeft">下拉刷新、转场动画</li>
                                <li class="animated bounceInRight">整个世界都流畅了</li>
                            </div>
                        </div>
                    </div>
                    <!-- 第四张 -->
                    <div class="mui-slider-item">
                        <div class="item-logo" style="background-color: #FCD208;">
                            <a href="#">
                            MUI
                            </a>
                            <div class="animate">
                                <button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
                            </div>
                        </div>
                    </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>
                mui.back = function() {};
                mui.plusReady(function() {
                    if(mui.os.ios){
                        plus.navigator.setFullscreen(true);
                    }
                    plus.navigator.closeSplashscreen();
                });
                //立即体验按钮点击事件
                document.getElementById("close").addEventListener('tap', function(event) {
                    plus.storage.setItem("lauchFlag", "true");
                    plus.navigator.setFullscreen(false);
                    plus.webview.currentWebview().close();
                }, false);
                //图片切换时,触发动画
                document.querySelector('.mui-slider').addEventListener('slide', function(event) {
                    //注意slideNumber是从0开始的;
                    var index = event.detail.slideNumber+1;
                    if(index==2||index==3){
                        var item = document.getElementById("tips-"+index);
                        if(item.classList.contains("mui-hidden")){
                            item.classList.remove("mui-hidden");
                            item.classList.add("guide-show");
                        }
                    }
                });
    
            </script>
        </body>
    
    </html>

MUI——App启动页与引导页

上一篇:6.0系统手机安装XPOSED框架失败The Xposed framework is not installed


下一篇:隐私专家:还在贬值卖你的二手手机吗?震惊!