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="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
HBuilder开发App教程06-首页的更多相关文章
- HBuilder开发App教程04-最难搞定的是mui
前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开 ...
- HBuilder开发App教程05-滴石和websql
滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...
- Hbuilder开发app实战-识岁03-文件上传
前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...
- Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
- HBuilder开发APP自动登录时跳过"登录页面"
刚接触开发公司APP项目,用HBuilder开发工具. manifest.json中的入口页面就是"登录页面",现在获取到自动登录状态是true,但是真机联调时"登录页面 ...
- hbuilder 开发app 自动升级
使用huilder 开发app ,实现app升级功能 1. var wgtVer = null; //用于获取系统当前版本 var currentversion = null; //用于获取系统最新 ...
- 学用HBuilder开发App的看过来
自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...
- HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试
No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
- Hbuilder开发app时生成ios要的mobileprovision和p12文件步骤.
1.在MAC电脑.钥匙串串访问->证书助理->从证书颁发机构请求证书,创建一个证书为certSigningRequest文件 2.在Apple Developer中的Certificate ...
随机推荐
- xshell连接linux
一些命令和快捷键: Ctrl + Alt 切换linux和windows的鼠标 Ctrl + c 或 Ctrl + d退出>状态 在xshell终端输入exit,退出与linux服务器的连接 登 ...
- cookie小结(转)
原文地址:http://www.cnblogs.com/xianyulaodi/p/6476991.html#_label0 作者:咸鱼老弟 阅读目录 什么是cookie 官方定义:N ...
- Eclipse如何创建模拟器
Eclipse如何创建模拟器下载地址:http://developer.android.com/sdk/index.html#downloadJDK安装包: 1, 打开安卓模拟器控制台(windows ...
- IPy模块--IP地址处理
Python之实用的IP地址处理模块IPy 实用的IP地址处理模块IPy 在IP地址规划中,涉及到计算大量的IP地址,包括网段.网络掩码.广播地址.子网数.IP类型等 别担心,Ipy模块拯救你.Ipy ...
- 大数据学习——sqoop安装
1上传 sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz 2解压 .bin__hadoop--alpha.tar.gz 3重命名 .bin__hadoop--al ...
- Git x SVN rebase事故
Git x SVN rebase事故 @author ixenos 2019-01-09 14:21:21 前言: 昨天在Git x SVN 中进行git svn dcommit的时候,提示需要再进行 ...
- TOJ 2419: Ferry Loading II
2419: Ferry Loading II Time Limit(Common/Java):1000MS/10000MS Memory Limit:65536KByteTotal Subm ...
- BZOJ 3750: [POI2015]Pieczęć 【模拟】
Description 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色. 你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上的图案.印的过程中需要 ...
- Morris Traversal 方法遍历二叉树(非递归、不用栈,O(1)空间)
http://www.cnblogs.com/AnnieKim/archive/2013/06/15/MorrisTraversal.html
- ElasticSearch API 之 GET
GET API是Elasticsearch中常用的操作,一般用于验证文档是否存在:或者执行CURD中的文档查询.与检索不同的是,GET查询是实时查询,可以实时查询到索引结果.而检索则是需要经过处理才能 ...