mui 启动页和引导页

来源：互联网发布：ubuntu制作u盘启动工具编辑：程序博客网时间：2024/06/01 17:28

一、启动页和引导页的概念

“启动页”（splash）：app的启动界面，每次启动都会看到的（每次打开QQ都会看到一只企鹅）。
“引导页”（guide）：guide是否展示是可控的，通常首次启动时显示，从第二次启动开始，引导页就不再显示，而是直接进入App主界面了。

二、启动页的设置

1. 在manifest.json文件中

在manifest.json文件的“启动图片（splash）配置”里设置，可以设置“延时关闭启动界面”或者“手动关闭启动界面”，实际开发中，通常需要设置手动关闭splash（HBuilder7.1版本后，启动界面不调用此方法超过6秒后会自动关闭）。

2. 在main.html文件中

手动关闭启动页的代码

plus.navigator.closeSplashscreen();

二、引导页的设置

1.在index.html中：

按照Hello mui启动页的逻辑，首次启动展示引导页，之后启动不再展示。那么就意味着，我们需要一个标识来确定，App是否已经启动过。我们可以在本地存储一个key，（如下例launchFlag），来作为已经启动过App的标识。在入口index.html中，就可以读取这个key，来决定是否展示引导页。

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>

2. 在guide.html中：

我们需要放置我们想要展示的内容，利用mui的slider组件，来制作一套引导信息。
如果使用图片的话，建议大家按照iPhone6 Plus的尺寸制作（其实就是往大了做），然后利用5+提供的方法计算屏幕正确的宽高，设置图片的宽高来撑满屏幕。

在最后一个引导界面提供一个App主界面入口，也就是“开始体验”这种按钮。（点击“开始体验”的同时，设置表示App已经启动过的标识。）

<!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="images/1.jpg">                        </a>                    </div>                    <div class="mui-slider-item">                        <a href="javascript:;">                            <img class="guide-img" src="images/2.jpg">                        </a>                    </div>                    <div class="mui-slider-item">                        <a href="javascript:;">                            <img class="guide-img" src="images/3.jpg">                        </a>                    </div>                    <div class="mui-slider-item">                        <a href="javascript:;"><!--javascript: 是一个伪协议,javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。-->                            <img class="guide-img" src="images/4.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>

注意：关于<a href="javascript:;"></a>及<a href="#"></a>

<a href="javascript:;"></a>：

”javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。

<a href="#"></a>：

href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新。这是一个锚链接。

如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题。而使用href="javascript:;" 就可以避免页面的乱跳！所以，如果我们想要写一个死的a标签，使用<a href="javascript:;"></a>会更有利于增加我们的页面的用户友好度！

如果引导页不能流畅切换，可以参见http://www.cnblogs.com/nangong/p/7e3200a9374c993a1e94b3005ee2a71e.html

阅读全文

0 0