实战

前面几节基本是一些概念的普及，

正如前面提到的，本教程会以滴石作为范例进行讲解，

有兴趣的可以先行下载体验一下，或者下载源码研究下。

新建项目

打开HBuilder，在项目管理器中右键——新建——移动app，或者直接ctrl+n，a，

见到如下界面，填入项目名称，选择mui项目，

新建完成后，默认生成的目录如下，基本和前端开发的目录结构类似，

连接手机

本教程暂时以android为例，最后会另外讲解ios手机的开发，大同小异。

用数据线连接android手机，将手机中的设置——开发人员工具——usb调试，打开，

选中之前新建的项目，选择菜单，运行——手机运行——你的手机，或者直接ctrl+r，

如果提示检测不到手机，你可以下载个应用宝之类的软件，应用宝会帮你搞定，

如果手机正常连接，控制台会显示如下信息，成功后，你的app已经在手机上运行了，

虽然是一个空白页，但是感觉下前端做app的乐趣吧。

慢慢来~

页面结构

首先说下文件存放结构，

js文件夹下新建lib和app文件夹，分别放工具js和页面js，如下

需要提到的是，工具js采用jquery，应该jquery很强大，

有的人会疑问jquery比较大，用jquery是不是不太好，

那你就错了，你还停留在网页的思维，

其实HBuilder最终会把这些js都打到app包内，

其实你调用jquery就是调用的app包内的js了，

不存在大不大，费不费流量的问题了。

然后是页面结构，

参考这里：http://dev.dcloud.net.cn/mui/window/ 中的创建子页面，见顶部图片

你可以看到首页是分为index部分，也就是可见的头部，有时候是头部和底部，

还有list部分，也就是中间部分，为什么要这么做，为了让app更加逼真，

你也可以尝试自己把index和list放到一起，最终的最终你还是会采用这种方法的。。

index.html

代码如下：

1.meta

不多说了，必须的，第二个是适应移动端

2.mui

mui的js和css是必须的，mui负责了app的ui界面和app和原生交互的封装，

你也可以用采用bootstrap或者amazeui或者jquery mobi等ui，但是这里还是推荐mui。

3.header

采用mui中封装好的组件“导航栏包含文字和图标”，详见这里：http://dev.dcloud.net.cn/mui/ui/

其中mui-pull-left代表浮动到左边，right到右边，mui-icon-*代表各种字体图标，

关于字体图标可以看这里，如果mui自带的没法满足，你可以在这里下载引入：http://www.iconfont.cn/

4.好习惯

将与页面初始化无关的js引入到body的最底部是一个好习惯，

这里引入了jquery和我自己的一些封装qiao.js，以后详细解说，最后是index页面对应的js

看看效果

将现在运行的app关掉，在控制台点关闭，

然后选中项目，ctrl+r，HBuilder我将最新的内容发布到手机上，

看看效果吧，发现已经有了头部了，虽然和简单，

但是有没有感觉和普通的app一样样的呢~