2016/5/6

目标：一款简单的APP制作；
工具：HBuilder、ps、安卓手机一部、chrome；
相关文档链接：HTML5+、MUI；
ps: 技术满天飞，新手苦苦追，墙外数枝红杏，折到哪枝算哪枝。不是大神，不评论技术，只想做些东西玩玩。
平常我们是QQ、微信、微博、贴吧、简书......种种APP 总会有这种如下图的引导页。
（ps:咳，我是看设计给我的文件我才知道这叫引导页，英文 贵的 guide 英文还是mui的案例里的类名）

首先在HB 里创建个 包含MUI的APP项目

APP项目示例

咳，忘记说了 再创建个自带的 hello MUI 的项目作参考最好；

hellp mui模板

基本的东西大家自己研究，或者到这里都可以自己研究（咳，很不负责任）

正式开始

打开示例项目 hello mui>examples>guide.html
咳，看到贵的 guide 了么 是他是他 就是他，我鼓捣了2个小时就似为了找到他，原因是 示例项目 在手机测试他的引导页就出现一次，然后你就找不到了，然后还得清缓存......
要说我怎么找到的下面给大家介绍一下！@#￥%……%……&
请参照：Chrome调试Android应用（Debug）；//还需要翻墙等乱七八糟的
USB 链接手机>HB手机运行项目>打开chrome浏览器>输入 chrome://inspect；

这一堆的窗口

看到这么多窗口了么，我是挨个 inspect 才找到的：

贵的 guide

贵的 guide

学好英语是是多么的主要啊，找到以后 果断有道一下，好么 贵的 guide 引导，秒哭，血的教训我记下了这个单词，估计下个礼拜就忘了，咳咳， 贵的 引导==》买？ 引导买贵的？！@##￥%……&*

<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
            <div class="mui-slider-group">
                <!-- 第一张 -->
                <div class="mui-slider-item">
                    <div class="item-logo" style="background-color: #D74B28">
                        <a href="#">
                        MUI
                        </a>
                        <div class="animate guide-show">
                            <h2 class="animated bounceInDown">小巧高能</h2>
                            <li class="animated bounceInLeft">几十K的JS和CSS</li>
                            <li class="animated bounceInRight">上百种控件样式和模板</li>
                        </div>
                    </div>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item">
                    <div class="item-logo" style="background-color: #02C1ED;">
                        <a href="#">
                        MUI
                        </a>
                        <div id="tips-2" class="animate mui-hidden">
                            <h2 class="animated bounceInDown">原生UI</h2>
                            <li class="animated bounceInLeft">以iOS原生UI为基础</li>
                            <li class="animated bounceInRight">补充Android特有样式</li>
                        </div>
                    </div>
                </div>
                <!-- 第三张 -->
                <div class="mui-slider-item">
                    <div class="item-logo" style="background-color: #67C962;">
                        <a href="#">
                        MUI
                        </a>
                        <div id="tips-3" class="animate mui-hidden">
                            <h2 class="animated bounceInDown">流畅体验</h2>
                            <li class="animated bounceInLeft">下拉刷新、转场动画</li>
                            <li class="animated bounceInRight">整个世界都流畅了</li>
                        </div>
                    </div>
                </div>
                <!-- 第四张 -->
                <div class="mui-slider-item">
                    <div class="item-logo" style="background-color: #FCD208;">
                        <a href="#">
                        MUI
                        </a>
                        <div class="animate">
                            <button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
                        </div>
                    </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>
</div>

OMG 太多了什么乱七八糟的 我反正是受不了,以下是我注释的基本结构

<!--
        //slider 层级结构
        <div class="mui-slider mui-fullscreen">
            //内容区域  group:分组
            <div class="mui-slider-group">
                <div class="mui-slider-item">
                    //content
                </div>
                <div class="mui-slider-item">
                </div>
                ......
            </div>
            //选项 指示符 indicator:指示符
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                ......
            </div>
        </div>
    -->

不需要理案例里内部的JS，它是有效果的，去运行看看吧看效果之前记得 上好你的css样式。
本次就到这里，不明白HB 和 chrome调试工具的补课吧。
HB慎用，固然敲代码很快，用时间长了，敲元素忘属性郁闷，英语不好慎用，MUI，H5+用它还是很好，尽量少用提示就是

诺诺提供