实战
前面几节基本是一些概念的普及,
正如前面提到的,本教程会以滴石作为范例进行讲解,
有兴趣的可以先行下载体验一下,或者下载源码研究下。
新建项目
打开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包内,
不存在大不大,费不费流量的问题了。
然后是页面结构,
参考这里: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="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
不多说了,必须的,第二个是适应移动端
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。