HBuilder mui 手拉手教你制作引导页

在制作引导页之前，先澄清一个概念。“启动界面”和“引导页”是两个东西，就拿hello mui为例，我们第一次打开的时候是这样的：
首屏那个MUI字样的图片，叫做“启动界面”，后面的几个slider叫做“引导页”。而且，目前还不支持动态设置启动界面，但是引导页是html文件，里面的内容是我们自己可以动态控制的。
回归正题，下面我们开始制作常规的引导页。
一、index.html
入口页，是做为一个逻辑判定的入口。通过读取本地的数据存储来判定是否第一次启动应用，进而决定加载哪个页面。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>入口页面</title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <style type="text/css">
            body {
                background-color: black;
            }
        </style>
    </head>

    <body>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function() {
                /**
                 * 获取本地存储中launchFlag的值
                 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.getItem
                 * 若存在，说明不是首次启动，直接进入首页；
                 * 若不存在，说明是首次启动，进入引导页；
                 */
                var launchFlag = plus.storage.getItem("launchFlag");
                if(launchFlag) {
                    mui.openWindow({
                        url: "main.html",
                        id: "main",
                        extras: {
                            mark: "index" //额外的参数，仅仅是个标识，实际开发中不用；
                        }
                    });
                } else {
                    mui.openWindow({
                        url: "guide.html",
                        id: "guide"
                    });
                }
            });
        </script>
    </body>

</html>

在这之前，我们还需要做一件事，那就是把启动界面设置为手动关闭，但是如果启动6秒后依旧没有手动关闭，它还是会自动关闭的，这个文档中有详细的说明。
二、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>

三、main.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" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">首页</h1>
        </header>
        <div class="mui-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" id="reset_launch">
                    <a class="mui-navigate-right">重置首次打开app</a>
                </li>
            </ul>
        </div>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            mui.plusReady(function() {
                /**
                 * 手动关闭启动界面
                 */
                plus.navigator.closeSplashscreen();
                /**
                 * 获取当前窗口对象，并取我们之前传过来的标识；
                 */
                var self = plus.webview.currentWebview();
                var mark = self.mark;
                /**
                 * 自动消失提示，位置为top；
                 * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastOption
                 */
                plus.nativeUI.toast("我是从" + mark + "页面进来的", {
                    verticalAlign: "top"
                });
                document.getElementById("reset_launch").addEventListener("tap", function() {
                    /**
                     * 系统确认对话框
                     * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.confirm
                     */
                    plus.nativeUI.confirm("是否重置首次打开app？", function(event) {
                        /**
                         * 按钮的索引，从0开始；
                         */
                        var index = event.index;
                        if(index == 0) {
                            /**
                             * 通过key值删除键值对存储的数据
                             * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.removeItem
                             */
                            plus.storage.removeItem("launchFlag");
                            /**
                             * 自动消失提示，位置为center；
                             * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastOption
                             */
                            plus.nativeUI.toast("重置成功，2秒后重启app。", {
                                verticalAlign: "center"
                            });
                            /**
                             * 2秒后重启应用
                             * http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.restart
                             */
                            setTimeout(function() {
                                plus.runtime.restart();
                            }, 2000);
                        }
                    }, "重置启动", ["重置", "放弃"]);
                });
            });
            /**
             * 重写mui.back()，一秒内连续点击两次，退出应用，仅安卓有效；
             */
            var first = null;
            mui.back = function() {
                if(!first) {
                    first = new Date().getTime();
                    /**
                     * 自动消失提示信息
                     * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.toast
                     */
                    plus.nativeUI.toast("再按一次退出应用");
                    setTimeout(function() {
                        first = null;
                    }, 1000);
                } else {
                    if(new Date().getTime() - first < 1000) {
                        /**
                         * 退出应用，仅安卓有效；
                         * http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
                         */
                        plus.runtime.quit();
                    }
                }
            };
        </script>
    </body>

</html>

主界面，也就是正式进入应用了。为了方便大家测试体验，提供了一个清楚首次启动信息，并重启应用的功能。
、实际开发中的扩展
许多同学会问，启动应用后的广告页怎么制作。引导页都会做了，广告页还能不会？不就是把引导页的内容，换成你广告的内容嘛。
不过需要注意的一点就是，index.html里面的页面跳转逻辑是关键。
如果你每次打开应用，都要展示广告，那么index.html的逻辑判定就可以忽略掉，入口页直接放置广告即可；如果你是偶尔需要放置广告页，那么index.html页面需要做的就是向后端发起请求（实现动态展示广告的一种方案），来决定是否放置广告，从而进行页面的正确跳转。
总之，无论是引导页还是广告页，入口页面的逻辑判定才是关键，一定要按照自己的实际业务需求来进行正确的跳转和展示。
最后还请大家多多指教，补充意见。附上源码，真机运行即可。

感谢分享http://www.bcty365.com/content-146-4970-1.html

HBuilder mui 手拉手教你制作引导页

猜你喜欢