wap2app（三）-- 添加引導頁

時間 2019-11-11

標籤 wap2app wap app 添加引導欄目 HTML 简体版

原文原文鏈接

1.在client_index.html文件中添加以下代碼：javascript

<script type="text/javascript">
                        
    if(window.plus){
        plusReady()
    }else{
        document.addEventListener('plusready',plusReady,false)
    }
    function plusReady(){//這裏是每次進入應用都會顯示引導頁，開發中要如何顯示引導頁視具體的狀況而定。
        var guide = plus.webview.create('guide.html',"guide");
        guide.show();
    }
</script>

2.建立image文件夾，添加引導圖的圖；建立css文件夾，引入mui.min.css、mui.css；建立js文件夾，引入mui.js文件、mui.min.js文件等。css

3.添加引導頁面 guide.html，代碼以下：html

<!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 type="text/css">
            body {
                background-color: black;
            }
            
            .guide-img {
                width: 100%;
            }
            
            #start {
                position: absolute;
                bottom: 40px;
                width: 60%;
                left: 20%;
            }
        </style>
    </head>

    <body>
        <div class="mui-content">
            <div class="mui-slider mui-fullscreen">
                <div class="mui-slider-group">
                    <div class="mui-slider-item">
                        <a href="javascript:;">
                            <img class="guide-img" src="image/cbd.jpg">
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="javascript:;">
                            <img class="guide-img" src="image/muwu.jpg">
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="javascript:;">
                            <img class="guide-img" src="image/shuijiao.jpg">
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="javascript:;">
                            <img class="guide-img" src="image/yuantiao.jpg">
                            <button class="mui-btn mui-btn-blue mui-btn-outlined" type="button" id="start">開始體驗</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            mui.plusReady(function() {
                /**
                 * 獲取系統狀態欄高度
                 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
                 */
                var sh = plus.navigator.getStatusbarHeight();
                /**
                 * 獲取設備屏幕高度分辨率以及寬度分辨率
                 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight
                 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth
                 */
                var h = plus.screen.resolutionHeight;
                var w = plus.screen.resolutionWidth;
                /**
                 * 設置圖片高度，這裏圖片並不規範；
                 * 實際開發中，建議你們製做iphone6plus規格的圖片；
                 */
                var imgs = document.querySelectorAll(".guide-img");
                for(var i = 0, len = imgs.length; i < len; i++) {
                    imgs[i].style.height = (h - sh) + "px";
                    imgs[i].style.width = w + "px";
                }
                /**
                 * 手動關閉啓動頁
                 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen
                 */
                plus.navigator.closeSplashscreen();
                document.getElementById("start").addEventListener("tap", function() {
                    /**
                     * 向本地存儲中設置launchFlag的值，即啓動標識；
                     * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
                     */
                    plus.storage.setItem("launchFlag", "true");
                    mui.openWindow({
                        url: "main.html",
                        id: "main",
                        extras: {
                            mark: "gudie" //一樣，這裏也只是個標識，實際開發中並不用；
                        }
                    });
                });
            });
            /**
             * 重寫mui.back()，什麼都不執行，反之用戶返回到入口頁；
             */
            mui.back = function() {};
        </script>
    </body>

</html>

注意：要將guide.html中的mui.openWindow的url替換成你的首頁地址，能夠是根目錄下的地址，也能夠是網絡地址（http://或https://開頭），如：html5

mui.openWindow({
    url: "", //mian.html 或者如 https://www.baidu.com/
    id: "main",
    extras: {
        mark: "gudie" //一樣，這裏也只是個標識，實際開發中並不用；
    }
});

以上執行完畢以後，即可在真機上運行，查看引導圖頁面效果。
這裏是每次進入應用都會顯示引導頁，開發中要如何顯示引導頁視具體的狀況而定。

如須要只在首次出現引導圖：

在client_index.html文件中：

var launchFlag = plus.storage.getItem("launchFlag");
if(launchFlag == true) {
    //非首次
} else if(!launchFlag){
    //首次
    var guide = plus.webview.create('guide.html',"guide");
    guide.show();
}

並在guide.html中添加 launchFlag的標籤設置，向本地存儲中設置launchFlag的值，即啓動標識；在每次引導圖點擊當即使用是將標籤設置爲true：java

plus.storage.setItem("launchFlag", "true");

以上，便可實現引導圖的效果。git

那麼，怎麼在引導圖中添加分頁器，寫分頁器主要是能監聽滑動的事件，只要能監聽到滑動事件，那麼在滑動時添加分頁器的高亮便可。github

查閱資料知道，當拖動切換顯示內容時，會觸發slide事件，經過該事件的detail.slideNumber參數能夠得到當前顯示項的索引，因而監聽slide事件：web

document.querySelector('.mui-slider').addEventListener('slide', function(event) {
    //注意slideNumber是從0開始的；
    alert(event.detail.slideNumber);
});

而後寫一個分頁器：網絡

<div class="guide-pages">
    <ul>
        <li class="li-guide active" id="li-guide0"></li>
        <li class="li-guide" id="li-guide1"></li>
        <li class="li-guide" id="li-guide2"></li>
        <li class="li-guide" id="li-guide3"></li>
    </ul>
</div>

css:app

.guide-pages{
    position: absolute;
    left: 50%;
    bottom: 17px;
    width: 120px;
    margin-left: -80px;
    text-align: center;
}
.li-guide{
    display:block;
    float: left;
    width:10px;
    height: 10px;
    background-color: #000;
    margin-left: 5px;
    margin-right: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    opacity: 0.3;
}
.li-guide.active{
    opacity: 1;
    background-color: #3478f6;
}

js:

document.querySelector('.mui-slider').addEventListener('slide', function(event) {
    //注意slideNumber是從0開始的；
    document.querySelector(".active").classList.remove("active");
    var this_id = "li-guide" + event.detail.slideNumber;
    document.getElementById(this_id).classList.add("active");
});

以上，便可實現分頁器。

附：

官方文檔地址：http://ask.dcloud.net.cn/article/13011

git地址：https://github.com/erinwxl/wap2app-guide

整理不易，轉載時請註明出處及相應連接，本文永久地址：http://www.javashuo.com/article/p-adwmgzfz-e.html，文章標題備註轉載，如：xxx【轉載】,謝謝！