您的位置：首页 > 产品设计 > UI/UE

二.MUI框架 开始体验MUI

2017-04-06 08:52 141 查看

1、安装新版HBUilder

下载地址: http://www.dcloud.io/

2、新建app项目

文件—新建—移动app—项目名称+mui项目

3、真机调试及运行

不管是iOS还是Android，不管是模拟器还是真机，都可以与HBuilder连接进行真机运行。
以往开发App，需要改一个界面，然后打包，然后安装到手机上，然后进入那个界面，看看改对了没。没有的话循环这套动作，非常低效。
有了真机运行，改了代码后保存，手机立即看到效果，如果在手机上运行时发生错误，那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法，但事实上在HBuilder的js里敲clog，用打日志来调程序更好。

4、文件结构介绍
|_ css 样式表文件夹
|_ fonts 字体文件夹
|_ js JavaScript脚本文件夹
|_ index.html 入口文件

5.基础布局
（1）、头部
核心css mui-bar mui-bar-nav
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">hello</h1>
</header>（2）、主体部分
核心css mui-content
<div class="mui-content">
主体部分....
</div>
完整代码演示
<!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="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">hello</h1>
</header>
<div class="mui-content">
内容部分....
</div>
</body>
</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                MUI
                                                app
                                                框架
                                                布局
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航