这周因为部门接了个小的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. Leetcode 121. Best Time to Buy and Sell Stock 最佳股票售卖时(动态规划，数组，模拟)

    题目描述 已知一个数组,第i个元素表示第i天股票的价格,你只能进行一次交易(买卖各一次),设计算法找出最大收益 测试样例 Input: [7, 1, 5, 3, 6, 4] Output: 5 最大收 ...

  2. CF796B Find The Bone

    Zane the wizard is going to perform a magic show shuffling the cups. There are n cups, numbered from ...

  3. kuangbin专题七 ZOJ1610 Count the Colors （灵活线段树）

    Painting some colored segments on a line, some previously painted segments may be covered by some th ...

  4. Le x820 的刷机记录

    一定要卡刷,如果用线刷,那些线刷宝等会内置好多应用. 卡刷的ROM包,都属于“民间包”,而官方的recovery,是不允许刷第三方包的.所以我们要先刷recovery.(刷入第三方recovery,还 ...

  5. STS（spring tool suite）修改默认编码

    安装STS后首先要做的修改默认编码: 1.windows--perferences--general--workspace,Text file encoding设置成utf-8 2.windows-- ...

  6. Android_靠谱的监听软键盘状态的方法

    public class MyActivity extends AppCompatActivity { /** * 当前界面中的软件盘的状态 */private boolean isKeyBoardO ...

  7. 字符串转LocalTime再转Instant

    LocalTime a= LocalTime.parse("20:13:01"); // LocalTime a= LocalTime.now(); System.out.prin ...

  8. 简单的Web日志分析脚本

    前言 长话短说,事情的起因是这样的,由于工作原因需要分析网站日志,服务器是windows,iis日志,在网上找了找,github找了找,居然没找到,看来只有自己动手丰衣足食. 那么分析方法我大致可分为 ...

  9. aerospike（1）-centos7安装aerospike

    要安装的软件:server和tools 下载地址:https://www.aerospike.com/download/server/4.5.1.5/ server: 1.下载 wget https: ...

  10. es6数组新方法

    (1)Array.from(aarr,fn,obj) function fn(dr, sd, d) { /*Array.from 类数组转化为数组*/ console.log(arguments) v ...