wap2app-- 添加引导页

Posted wangxiaoling315

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wap2app-- 添加引导页相关的知识,希望对你有一定的参考价值。

1.在client_index.html文件中添加如下代码:

<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文件等。

3.添加引导页面 guide.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://开头),如:

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:

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

 以上,即可实现效果。

附:

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

源码地址:https://github.com/erinwxl/wap2app-guide

 




以上是关于wap2app-- 添加引导页的主要内容,如果未能解决你的问题,请参考以下文章

ios开发之--新手引导页的添加

HTML:使用引导程序添加粘性页脚响应[重复]

如果在 WebView 片段中按下后退按钮,如何返回上一页?

Android如何添加多张引导页

IOS 一句代码搞定启动引导页

iOS引导页启动页