实战

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

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

有兴趣的能够先行下载体验一下。或者下载源代码研究下。

新建项目

打开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-首页的更多相关文章

  1. HBuilder开发App教程04-最难搞定的是mui

    前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开 ...

  2. HBuilder开发App教程05-滴石和websql

    滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...

  3. Hbuilder开发app实战-识岁03-文件上传

    前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...

  4. Hbuilder开发app实战-识岁06-face++的js实现【完结】

    前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...

  5. HBuilder开发APP自动登录时跳过"登录页面"

    刚接触开发公司APP项目,用HBuilder开发工具. manifest.json中的入口页面就是"登录页面",现在获取到自动登录状态是true,但是真机联调时"登录页面 ...

  6. hbuilder 开发app 自动升级

    使用huilder 开发app  ,实现app升级功能 1. var wgtVer = null; //用于获取系统当前版本 var currentversion = null; //用于获取系统最新 ...

  7. 学用HBuilder开发App的看过来

    自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...

  8. HBuilder开发App Step1——环境搭建，HelloMUI 以及真机调试

    No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...

  9. Hbuilder开发app时生成ios要的mobileprovision和p12文件步骤.

    1.在MAC电脑.钥匙串串访问->证书助理->从证书颁发机构请求证书,创建一个证书为certSigningRequest文件 2.在Apple Developer中的Certificate ...

随机推荐

  1. java 简单秒杀

    以下代码 不考虑多服务器 限制线程池的大小 和队列的限制来实现 package org.zhang; import java.util.concurrent.BlockingQueue; import ...

  2. python 跨域

    CORS跨域请求 CORS即Cross Origin Resource Sharing 跨域资源共享, 那么跨域请求还分为两种,一种叫简单请求,一种是复杂请求~~ 简单请求 HTTP方法是下列方法之一 ...

  3. Windows同步阿里云时间

    Ctrl+R打开cmd命令框 输入:gpedit.msc 计算机配置”—“管理模版”—“系统”—“Windows 时间服务”—“时间提供程序”—“配置 Windows NTP 客户端 双击打开配置 W ...

  4. Codeforces 545E. Paths and Trees[最短路+贪心]

    [题目大意] 题目将从某点出发的所有最短路方案中,选择边权和最小的最短路方案,称为最短生成树. 题目要求一颗最短生成树,输出总边权和与选取边的编号.[题意分析] 比如下面的数据: 5 5 1 2 2 ...

  5. BZOJ-1303 中位数图

    先找到B的位置x,然后依次统计A[i..x-1](0<i<x)中小于B的个数,和A[x+1..i](x<i<n)中大于B的个数 最后Answer等于(左边有i个小于B的情况总数 ...

  6. SPOJ QTREE Query on a tree V ——动态点分治

    [题目分析] QTREE4的弱化版本 建立出分治树,每个节点的堆表示到改点的最近白点距离. 然后分治树上一直向上,取min即可. 正确性显然,不用担心出现在同一子树的情况(不会是最优解),请自行脑补. ...

  7. 刷题总结——road（ssoi）

    题目: 题目背景 SOURCE:NOIP2016-RZZ-1 题目描述 有 N 个城市,这些城市通过 M 条无向边互相连通,每条边有一个权值 Ci ,表示这条边的长度为 2^(Ci) ,没有两条边的长 ...

  8. bzoj2324 [ZJOI2011]营救皮卡丘 费用流

    [ZJOI2011]营救皮卡丘 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2653  Solved: 1101[Submit][Status][D ...

  9. MyEclipse6.5增加对Tomcat7的支持

    MyEclipse6.5增加对Tomcat7的支持 最近在研究Servlet3.0,它是JavaEE6.0规范中的一部分 而Servlet3.0对服务器是有要求的,比如Tomcat7+(而Tomcat ...

  10. mybatis配置报错(properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrapperFactory?,reflectorFactory?,plugins?,environments?,databaseIdProvider?,mappers?)

    如下报错:解决方案:要按照提示的顺序添加属性,(properties?,settings?,typeAliases?,typeHandlers?,objectFactory?,objectWrappe ...