这周因为部门接了个小的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 520. Detect Capital 发现大写词 (字符串)

    Leetcode 520. Detect Capital 发现大写词 (字符串) 题目描述 已知一个单词,你需要给出它是否为"大写词" 我们定义的"大写词"有下 ...

  2. Ubuntu wubi.exe 安装到Windows 正在下载ubuntu-11.04-desktop-i386.iso

    下载一个Ubuntu的iso镜像,用虚拟光驱加载后,点击 wubi.exe->安装到Windows 设置好后,进入安装,又自动开始下载iso镜像了,提示:正在下载ubuntu-11.04-des ...

  3. 执行umount 的时候却提示:device is busy 的处理方法

    [root@web2-server yum.repos.d]# umount /mnt/cdrom/ umount: /mnt/cdrom: device is busy. (In some case ...

  4. CodeForces - 124B-Permutations(DFS)

    You are given n k-digit integers. You have to rearrange the digits in the integers so that the diffe ...

  5. hdu2066一个人的旅行(disjkstra)

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  6. rhcs红帽插件及 轮循

    server1:yum install luci ricci -yecho westos | passwd -stdin  ricci/etc/init.d/ricci startchkconfig ...

  7. k2安装LEDE

    固件下载时请用Breed Web 恢复控制台恢复固件,步骤如下:1.到LEDE官方网站下载最新开发版固件2.Web Breed台刷写固件3.将一台能上网的路由器LAN口接至K2 WAN口,等待K2连上 ...

  8. Problem07 处理字符串

    题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 程序分析:利用while 语句,条件为输入的字符不为'\n'. import java.util.*; public clas ...

  9. my03_使用空数据库搭建Mysql主从复制

    无数据的主从复制,就搭建一套主从结构的空库,这个是最简单的,先说说这种主从的搭建思路,有利于理解Mysql主从复制1. 安装两套mysql单实例数据库,一个作为主库.一个作为从库:注意要设置两个数据库 ...

  10. python 下载图片

    import requests from PIL import Image from io import BytesIO url = 'http://image2.buslive.cn/shp/upl ...