这周因为部门接了个小的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. 04->python字典

    字典dict 1.数据类型分类(按可变和不可变)     不可变数据类型:数字.bool.str.tuple     可变数据类型:list.dict.set 2.dict的组成     key:va ...

  2. NowCoder数列（矩阵快速幂变式）

    时间限制 3000 ms 内存限制 32768 KB 代码长度限制 100 KB 题目描述 NowCoder最近在研究一个数列: * F(0) = 7 * F(1) = 11 * F(n) = F(n ...

  3. Django 想要单独执行文件

    Django  单独文件执行  文件  我是在项目根目录文件创建的. 配置文件: #!/usr/bin/env python import os import sys if __name__ == & ...

  4. HDU5952 Counting Cliques计算完全图的个数 巧妙构图+dfs

    题目传送门 题目大意:给出n个点,m条无向边,让你计算这幅母图中有几个大小为s的完全图. 完全图的意思是任意一个点都和其他点直接相连,完全图的大小指的就是完全图点的个数. 思路:比较巧妙的构图方式.我 ...

  5. Angular组件生命周期——生命周期钩子

    生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...

  6. lnmp 架构

    Mysql安装 tar zxf mysql-boost-5.7.17.tar.gz yum install -y gcc gcc-c++ yum install cmake-2.8.12.2-4.el ...

  7. SQL注入工具sqlmap的注入过程记录

    1.sqlmap的get注入 假设目标是 https://www.baidu.com/news.php?id=1&data=2 sqlmap语句 列库 sqlmap.py -u "h ...

  8. Windows安装redis数据库以及集群部署

    1. 安装Redis版本:win-3.0.501https://github.com/MSOpenTech/redis/releases页面有,我下载的是zip版本的:Redis-x64-3.0.50 ...

  9. hashcode详解--转发

    序言 写这篇文章是因为在看hashMap源码时遇到有什么hashcode值,然后就去查,脑袋里面是有映像的,不就是在Object中有equals和hashcode方法嘛,这在学java基础的时候就遇到 ...

  10. HBase学习（一）

    HBase是建立在Hadoop文件系统之上的分布式面向列的数据库.它是一个开源项目,是横向扩展的. HBase是一个数据模型,类似于谷歌的大表设计,可以提供快速随机访问海量结构化数据.它利用了Hado ...