guide,英语的意思有指导，指南，向导。由此，可见，guide的重要性。guide，就像两个陌生人之间的第一印象。第一印象的好坏，往往就决定了，使用app的人对你这个app的敢兴趣程度。

其实，在guide之前，还有一个splash页面。splash页面，是点击app快捷图标，第一个展现在眼前的页面。该页面，是配置在manifest.json中的，很多东西都配置在manifest.json中的。那么，打开一个app，展现在打开app人眼前的是页面先后顺序是：splash页面，guide页面，app内容页面。

最美的东西，看多了，也会厌倦。那么，guide页面也是如此。你每次打开，总是看到相同的展示页面（一般仅仅展示，没有实际的操作功能），也会感到反感。那么，灵活的使用guide页面就比较重要了。可以这样一种假象。比如安装app后，第一次打开展示guide页面，更新后展示guide页面，或有新的觉得值得展示的时候展示guide页面。其他的时候，直接从splash页面到app内容页面。

不过，用HBuilder开发app应用，调试的时候，快捷图标（暂且这样叫吧，如同桌面程序。还没研究官方怎么个叫法）和splash页面总会是HBuilder自己的图标和页面。这个，没办法更改。就算你在mainfest.json中配置了也是一样。官方的意思是，你要打包成app后，你才能有自己的快捷图标和splash页面。有强迫症，追求完美的我，总是感觉到不爽。不过，自己暂时也没办法。如果打包成app的话，对于ios系统的，可以打包整越狱包或签名的证书包。越狱包是容易，打包了，安装不了。证书包，这个暂时我也没弄好。好了，纠结归纠结。还是开始guide引导页面的制作吧。

在未知之前，看看官方给的例子也是蛮好的。打开官方的HellMui的APP，点击点击。然后把官方APP源码下载下来。下载看看吧。
https://github.com/dcloudio/mui/tree/master/examples/hello-mui

官方，其他APP源码下载：https://github.com/dcloudio/casecode

H5APP其他案例：http://dcloud.io/case/#group-1

如果，对HBuilder，mui，html5+ 一点都不了解，可以先看看官方的介绍，开发指南什么的。http://ask.dcloud.net.cn/article/591 这里仅仅一篇开发指南，更多介绍，更多资料，可以自己去找去查。如果想的话。

对于一条线段，有个起点，对于一个项目，有文档类，对于一个类，有构造函数。H5APP项目也一样。先创建吧。打开HBuilder，一次点击：“文件”->“新建”->“移动App”。然后会跳出一个创建引导面板。如图。

填写应用名称，选择模板。为了方便而不累赘，我们选择“mui项目”模板。点击完成。然后，基础的配置，css，jss等已经创建好了。

项目的icon中，有个A，表示该项目是APP项目。尘归尘，土归土，css归css，js归js包。自己也可以另建包。一般我都会自己另建包路径的。
刚创建项目，项目中，仅仅就只有这几个文件。需要自己渐渐的扩充和壮大。

项目中的index.html文件，就是文档类了。打开app，调用的一个页面就是html页面。打开该html页面，除了和正常的html页面一样外，还多了一条js语句：mui.init();初始mui，里边可以带参数。在h5+中，为了性能，为了为了。页面一般都是以webview为单位的，可以多个webview共存。还可以预加载，还可以侦听各种事件。比如展示webview，webview加载完成等等。其实，这些对于as，都是很轻松，很容易的事情。flash很早很早，早了不知道多少年就有的功能。还能更流畅，更人性化。现在也只是感叹感叹了。未遇好主。

在项目中，我们会侦听初始化完成的状态。就好像在传统的html中，我们会侦听window.onload一样。而h5+APP应用中，我们侦听的是mui.plusReady事件。可以写mui.plusReady(function(){ };); 也可以写mui.addEventListener(“plusReady” , function(){ };);。只有初始化完成，我们才好使用h5+的功能。

那么，我们先创建一个guide.html引导页面。该页面的代码。见文章尾部。然后，在index.html中调用它。这里我们可以用预加载的方式来加载它。也可以直接用webview.creat来创建他。请看，我用预加载的方式。

<!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>
    <script src="static/style/js/mui.min.js"></script>
    <link href="static/style/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
           mui.init();
           mui.plusReady(function(){
              var firstInFlag = plus.storage.getItem('firstInFlag'); //取存的数据
              var targetId , targetUrl;
              firstInFlag = true; //这里总给true，让每次都启动欢迎画面
              if (firstInFlag)
              {
                  targetUrl = 'page/common/guide.html';
                  targetId = 'page-guide';
              }
              else
              {
                  targetUrl = 'page/home.html';
                  targetId = 'page-home';
              }
              
              plus.navigator.setFullscreen(true); //进来的时候，就让app处于全屏状态
              
              var tagetWebView = mui.preload({url:targetUrl , id:targetId});
            tagetWebView.show("slide-in-right", 400, function() {
                    plus.navigator.closeSplashscreen(); //关闭splash，配置中可以设置自动关闭
                });
           })
    </script>
</head>
<body>
    
</body>
</html>

 

guide页面，大的方面，可以做成一个轮播的形式。手指滑动变更页面。也可以定时滑动页面。内部呢，对于一个完整的页面，你当然可以用js写它的动画了。轮播的滑动以及定时滑动。我们用到了mui-slider。看guide.html。里边有完整的代码。这里贴一部分。反正可以轮播，可以手指滑动播，点击，可以响应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="../../static/style/css/mui.css">
        <style>
            #close 
            {
                position: absolute;
                width: 160px;
                left: 50%;
                margin-left: -80px;
                bottom: 15%;
                padding: 10px;
                color: hotpink;
                border-color: hotpink;
            }
            
            .item-back 
            {
                width: 100%;
                height: 100%;
                position: relative;
            }
        </style>
    </head>

    <body>
        <div id="slider" class="mui-slider mui-fullscreen" style="background-color: #000000;">
            <div class="mui-slider-group">
                <div class="mui-slider-item">
                    <img class="item-back" src="../../static/image/guide/g1.jpg" />
                </div>    
                <div class="mui-slider-item">
                    <img class="item-back" src="../../static/image/guide/g2.jpg" />
                </div>
                <div class="mui-slider-item">
                    <img class="item-back" src="../../static/image/guide/g3.jpg" />
                </div>
                <div class="mui-slider-item">
                    <img class="item-back" src="../../static/image/guide/g4.jpg" />
                    <div class="animate">
                        <button id="close" class="mui-btn mui-btn-danger mui-btn-outlined" style="border-width: 2px; font-weight: bold;">立即体验</button>
                    </div>
                </div>
            </div>
            
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>

        <script src="../../static/style/js/mui.min.js"></script>
        <script>
            var preHome;
            mui.back = function(){};
            mui.plusReady(function(){
                if(mui.os.ios)
                {
                    plus.navigator.setFullscreen(true);
                }
                plus.navigator.closeSplashscreen();
                preHome = mui.preload({
                    url: "../common/prelude.html",
                    id: "page-prelude"
                });
            });
            
            document.getElementById('close').addEventListener('tap' , function(e){
                plus.storage.setItem("firstInFlag", plus.runtime.version);
                plus.webview.currentWebview().close();
                preHome.show("pop-in", 200);
            });
            
            document.querySelector('.mui-slider').addEventListener('slide' , function(e){
                //注意slideNumber是从0开始的；
                var index = e.detail.slideNumber + 1;
                if(index == 2 || index == 3)
                {
                    
                }
            })
        </script>
    </body>
</html>