HBuilder开发App教程06-首页 _HBuilder

与天地兮比寿，与日月兮齐光。这篇文章主要讲述HBuilder开发App教程06-首页相关的知识，希望能为你提供帮助。

文章图片

实战前面几节基本是一些概念的普及，
正如前面提到的，本教程会以滴石作为范例进行解说，
有兴趣的能够先行下载体验一下。或者下载源代码研究下。

新建项目打开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://dcloudio.github.io/mui/javascript/ 中的创建子页面，见顶部图片
你能够看到首页是分为index部分。也就是可见的头部，有时候是头部和底部。
还有list部分，也就是中间部分。为什么要这么做，为了让app更加逼真。
你也能够尝试自己把index和list放到一起，终于的终于你还是会採用这样的方法的。。

index.html代码例如以下：

< !DOCTYPE html> < html> < head> < meta charset=" utf-8" > < meta name=" viewport" content=" width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" > < !-- mui --> < script src=https://www.songbingjia.com/android/" js/mui.min.js" > < /script> < link href=" css/mui.min.css" rel=" stylesheet" /> < /head> < body> < header class=" mui-bar mui-bar-nav" > < a class=" mui-icon mui-icon-bars mui-pull-left menua" > < /a> < a class=" mui-icon mui-icon-plus mui-pull-right adda" > < /a> < h1 class=" mui-title" > 滴石< /h1> < /header> < !-- jquery --> < script type=" text/javascript" src=" js/lib/jquery-1.11.2.min.js" > < /script> < !-- qiao.js --> < script type=" text/javascript" src=" js/lib/qiao.js" > < /script> < !-- app --> < script type=" text/javascript" src=" js/app/index.js" > < /script> < /body> < /html>

1.meta
不多说了。必须的，第二个是适应移动端
【HBuilder开发App教程06-首页】2.mui
mui的js和css是必须的，mui负责了app的ui界面和app和原生交互的封装。
你也能够用採用bootstrap或者amazeui或者jquery mobi等ui，可是这里还是推荐mui。

3.header
採用mui中封装好的组件“导航栏包括文字和图标”，详见这里：http://dcloudio.github.io/mui/components/

当中mui-pull-left代表浮动到左边，right到右边，mui-icon-*代表各种字体图标，
关于字体图标能够看这里，假设mui自带的没法满足。你能够在这里下载引入：http://www.iconfont.cn/

4.好习惯
将与页面初始化无关的js引入到body的最底部是一个好习惯。
这里引入了jquery和我自己的一些封装qiao.js，以后具体讲解，最后是index页面相应的js

很多其它教程：HBuilder开发App教程：http://uikoo9.com/book/detail/3
很多其它学习笔记：http://uikoo9.com/book