您现在的位置: 首页 > 开发编程 > HBuilder教程 > 正文

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

作者:admin来源:网络浏览:时间:2016-07-28 09:23:19我要评论
分享到
在制作引导页之前,先澄清一个概念。“启动界面”和“引导页”是两个东西,就拿hello mui为例,我们第一次打开的时候是这样的:
HBuilder 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秒后依旧没有手动关闭,它还是会自动关闭的,这个文档中有详细的说明。

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

二、guide.html
引导页,我们需要放置我们想要展示的内容,然后提供一个应用的入口,也就是“开始体验”这种按钮。
HBuilder mui 手拉手教你制作引导页

 

<!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
第二次启动应用,会直接进入主界面的。

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

 

<!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>

主界面,也就是正式进入应用了。为了方便大家测试体验,提供了一个清楚首次启动信息,并重启应用的功能。

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

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

guide.zip

相关热词搜索: