【MUI】Y-R,mui学习实践（1）

2016/5/6

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

各色APP常用引导页示例

首先在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 引导，秒哭，血的教训我记下了这个单词，估计下个礼拜就忘了，咳咳， 贵的 引导==》买？ 引导买贵的？！@##￥%……&*

            

                
                

                    

                        
                        MUI
                        
                        

                            
小巧高能
                            
几十K的JS和CSS
                            
上百种控件样式和模板
                        
                    
                
                
                

                    

                        
                        MUI
                        
                        

                            
原生UI
                            
以iOS原生UI为基础
                            
补充Android特有样式
                        
                    
                
                
                

                    

                        
                        MUI
                        
                        

                            
流畅体验
                            
下拉刷新、转场动画
                            
整个世界都流畅了
                        
                    
                
                
                

                    

                        
                        MUI
                        
                        

                            立即体验
                        
                    
                
            
            

                

                

                

                

            
        

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

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

诺诺提供

这一堆 桌子椅子的 背景图 咋处理呢，纠结。
方案一：@media 换背景图
方案二： 做背景 考虑到可能极端情况会变形
方案三：背景一片白，桌子椅子随机生成，视觉滑块消失
大神们给点建议，拜谢~
本人一直认为技术上就是个小学生，有什么不对的，大神们斧正。