这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目。与其说是项目需要，其实更大部分是我自己想要做html5 app，因为我对这个全新的平台已经好奇很久了。蠢蠢欲动很久了，只不过之前没有碰到项目练手而已。

好了，让我们开始这篇博文的主要内容吧。说到html5相信大家都不陌生了，的确这个概念已经在国内火了一段时间，但是大家对于html5具体能够干什么，到底在什么地方我应该使用html5呢？然后html5相较之前的版本又多了什么呢？且听我慢慢到来吧，首先html5主要用于web端，因为html5本身就是一种从html慢慢进化过来的标记语言，只不过相较之前的版本html5多了一些被浏览器支持的强大标签，所以我们可以使用更简便、更高效的标签实现更加复杂的功能。所以说到底就是国外的一些标准组织出于现实需要，在原有html版本基础上面添加新的标签，同时制定一套新的标准，然后各大浏览厂商按照这套准则支持响应的功能。那么对于我们app开发者，使用html5开发和使用原生的语言开发又有什么优缺点呢？首先，我一直担心体验问题，因为毕竟是在手机浏览器里面显示一个.html页面。没有原生框架里面提供的一些控件库，同时没有原生的一些sdk支持，这是不是意味着用户就没有原生app的体验呢？随着这个项目开发过程，我发现html5在开发app的方面，完全没有问题。在用户体验方面几乎可以做的差不多，而且html5开发出来的app不管什么平台风格一致，一套代码，一次开发，你想想开发成本能够降低多少呢？

首先在新建的html页面如下代码<meta charset="utf-8">下面，添加下面的代码：<meta name="viewport" content="width=device-width,initable-scale=1,user-scalable=1">,这句代码是什么意思呢？我们看看viewport，这个标记是apple开发出来的，我们可以理解为：这个html页面就代表了一个app页面，这个页面的宽度跟屏幕的宽度一样，然后缩放比例是1，不允许用户缩放。通过这句代码我们达到当html页面在手机浏览器里面显示的时候，它是以手机屏幕的尺寸去显示的。然后我们就可以在这个html页面做很多事情了，比如我们想要添加一个页面title，我们应该怎么做呢?首先在页面里面添加如下的jquery mobile框架的样式文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

添加这三句应用之后，我们就可以在当前页面的<body></body>标签之间添加如下代码：

<div data-role="page">

<div data-role="header">

<h1>登录</h1>

</div>

<div data-role="content">

</div>

</div>

相信你一定看得懂div标签，但是data-role是什么意思呢？这是jquery mobile框架里面用于设置标签角色的属性，首先我们将最外层的div设置成page(就是整个页面)，然后次外层有header,content这就分别对应页面的标题和内容。你可以将上面的代码敲到一个html里面，然后放到服务器上面通过手机浏览器访问一下就知道了。当然，jquery mobile里面还有很多其他标签、属性、事件，利用这些东西我们就可以实现很多具有可交互的页面了。

我在学习过程中，最令我好奇的地方就是：前台html用户输入的信息怎样获取到后台，同时封装到http报文里面发送到服务端，然后解析出来的数据又是怎样传回到html页面进行现实的呢？相信如果有服务端开发经验的哥们这个好奇点，会感到很好笑。这不就是通过form，提交表单，然后利用javascript从html提交的参数里面提取我们需要的用到的数据吗？是呀，如果弄懂了这点，我相信好多哥们就能更加自信的开发html5了。其实从一定程度上来说，开发html5就是在开发服务端web网站，只不过我们在开发过程中会用客户端开发所需的一些设计思维，用户体验感吧了。说到这里，我们就可以很容易明白，开发html5所应该具有的技术基础了。我们可以使用：php,java,c#只要能够接受用户请求，给予用户响应在理论上面都可以用来开发html5 app。

刚刚从原生客户端转过来的话，可能会对一些页面布局很到很疑惑，因为页面布局很大程度上找不到原生语言那种规律，有的时候很简单的页面逻辑，可能费很大劲才能搞出来。其次我们可能对响应服务端http请求，响应方式也要有一定了解，这样才能更好的解析数据、展示页面。

好了，就讲这么多吧，技术细节大家可以在项目实战里面摸索。

学习html5 app项目开发的更多相关文章

  1. 用户识别APP项目开发计划书

    用户识别APP项目开发计划书        项目介绍: 用户识别APP,通过在有限时间内引导用户A交互,提取用户的行为特征,然后将APP交给用户X(可能是A也可能是陌生人),在1分钟内引导X交互,判断 ...

  2. MVC模式学习--雇员管理系统项目开发

    1, 项目开发,使用原型开发, ① 开发流程: 需求分析->设计阶段->编码阶段->测试阶段->发布阶段/维护阶段 需求阶段:PM/项目经理 对客户 设计阶段:技术人员(架构师 ...

  3. Spring Boot学习笔记：项目开发中规范总结

    Spring Boot在企业开发中使用的很广泛,不同的企业有不同的开发规范和标准.但是有些标准都是一致的. 项目包结构 以下是一个项目常见的包结构 以上是一个项目的基本目录结构,不同的项目结构会有差异 ...

  4. 迅为iTOP-4412物联网开发板入门学习高手进阶项目开发超树莓派

    免费视频教程: 为初学者精心录制的整套视频教程全部免费,随IT技术发展而不断增添的视频教程仍然免费!一支有经验的工程师团队会始终成为您的后盾. 项目实战---全开源: 手机远程控制开发板 门禁系统 W ...

  5. HTML5 App商业开发实战教程 基于WeX5可视化开发平台

  6. J2EE学习从菜鸟变大鸟之八 企业级项目开发的思考

    什么是企业级项目开发 "企业级项目".企业级项目开发,Java也是企业级项目开发,这个我们到处说.听,每天被我们挂在嘴边,可是到底什么项目才算是"企业级"?自己 ...

  7. APPCAN学习笔记001---app高速开发AppCan.cn平台概述

    1.APPCAN学习笔记---app高速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移 ...

  8. 开发外包注意事项——iOS APP的开发

    1. APP外包的流程是怎样的? 一般外包的项目都需要经常这几个流程: 1)需求沟通:双方沟通项目的需求,对项目的可行性进行分析 2)工作量评估:在确认了项目的需求后,外包团队对项目的价钱和进度进行评 ...

  9. 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享

    什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...

随机推荐

  1. 有趣的数 zoj 月赛

    题目描述 让我们来考虑1到N的正整数集合.让我们把集合中的元素按照字典序排列,例如当N=11时,其顺序应该为:1,10,11,2,3,4,5,6,7,8,9. 定义K在N个数中的位置为Q(N,K),例 ...

  2. html表单笔记

    1.下面是 <form> 属性的列表: accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...

  3. spring boot +Thymeleaf+mybatis 集成通用PageHelper，做分页

    controller: /**  * 分页查询用户  * @param request  * @param response  * @return  * @throws Exception  */ @ ...

  4. POJ1113 Wall

    题目来源:http://poj.org/problem?id=1113题目大意: 如图所示,给定N个顶点构成的一个多边形和一个距离值L.建立一个围墙,把这个多边形完全包含在内,且围墙距离多边形任一点的 ...

  5. poj2513连接木棍（字典树+欧拉回路+并查集）

    题目传送门 题目大意:给你一堆木棍,每根木管都有两种颜色,相同颜色的部分可以连接起来,问你这堆木棍可不可以连接成1根. 思路:大致的思路很好想,就是判断欧拉回路的方法(1.联通,2,要么顶点读书全为偶 ...

  6. 关于web安全需要在编程时注意的

    公司用绿盟科技的远程安全评估系统扫描了项目,发现一些安全隐患,记录下来,以规避以后编程或者发布时犯同样的错误. 1. 目标web应用表单存在口令猜测攻击 风险:登录密码易被暴力破解,暴力破解是一种常见 ...

  7. PHP HTTP的PUT,DELETE的使用

    GET操作是安全的.所谓安全是指不管进行多少次操作,资源的状态都不会改变.比如我用GET浏览文章,不管 浏览多少次,那篇文章还在那,没有变化.当然,你可能说每浏览一次文章,文章的浏览数就加一,这不也改 ...

  8. git命令行操作：拉不到最新代码???

    现场场景:   仓库中有一个包名使用了驼峰命名,还有一个非驼峰的同名包, windows系统下因为不区分文件夹大小写,拉取没问题,但是本地push不上去.打算到Linux上clone下来后,删除那个驼 ...

  9. Python读写操作Excel模块_xlrd_xlwt_xlutils

    Python 读写操作Excel -- 安装第三方库(xlrd.xlwt.xlutils.openpyxl) 如果仅仅是要以表单形式保存数据,可以借助 CSV 格式(一种以逗号分隔的表格数据格式)进行 ...

  10. php 数据库查询order by 与查询返回的数据类型

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2017/11/24 * Time: 9:40 * * 从结果集合中读取一行数据 * ...