> > 1 MUI 介绍、新项目创建、 基础布局
gebilaowang

1 MUI 介绍、新项目创建、 基础布局

1 MUI 介绍、新项目创建、 基础布局

戈途途冲獭炉驰清翰狗备汕使

参考文档：

开始体验MUI
1、安装新版HBUilder
下载地址: http://www.dcloud.io/

2、新建app项目

1 MUI 介绍、新项目创建、 基础布局第1张

3、真机调试及运行

不管是iOS还是Android，不管是模拟器还是真机，都可以与HBuilder连接进行真机运行。

以往开发App，需要改一个界面，然后打包，然后安装到手机上，然后进入那个界面，看看改对了没。没有的话循环这套动作，非常低效。

有了真机运行，改了代码后保存，手机立即看到效果，如果在手机上运行时发生错误，那么日志和错误信息也都可以反馈到HBuilder控制台。

有些开发者喜欢alert大法，但事实上在HBuilder的js里敲clog，用打日志来调程序更好。

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

基础布局

一、头部
核心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>

二、主体部分
核心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>

实际操作

1.头部布局

头部 

<body>
	<header class="mui-bar mui-bar-nav">
		
	</header>
</body>

执行：

1 MUI 介绍、新项目创建、 基础布局第2张

添加标题和后退按钮 

<body>
	<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>
</body>

执行：

1 MUI 介绍、新项目创建、 基础布局第3张

2.主体部分 

<body>
	<!--头部-->
	<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>

执行：

1 MUI 介绍、新项目创建、 基础布局第4张

完整源码： 

<!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>
	<!--头部-->
	<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>

  

哨乔肮红宪鲸歉臀荷瞎浮构驳