学习html5 app项目开发
这周因为部门接了个小的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项目开发的更多相关文章
- 用户识别APP项目开发计划书
用户识别APP项目开发计划书 项目介绍: 用户识别APP,通过在有限时间内引导用户A交互,提取用户的行为特征,然后将APP交给用户X(可能是A也可能是陌生人),在1分钟内引导X交互,判断 ...
- MVC模式学习--雇员管理系统项目开发
1, 项目开发,使用原型开发, ① 开发流程: 需求分析->设计阶段->编码阶段->测试阶段->发布阶段/维护阶段 需求阶段:PM/项目经理 对客户 设计阶段:技术人员(架构师 ...
- Spring Boot学习笔记:项目开发中规范总结
Spring Boot在企业开发中使用的很广泛,不同的企业有不同的开发规范和标准.但是有些标准都是一致的. 项目包结构 以下是一个项目常见的包结构 以上是一个项目的基本目录结构,不同的项目结构会有差异 ...
- 迅为iTOP-4412物联网开发板入门学习高手进阶项目开发超树莓派
免费视频教程: 为初学者精心录制的整套视频教程全部免费,随IT技术发展而不断增添的视频教程仍然免费!一支有经验的工程师团队会始终成为您的后盾. 项目实战---全开源: 手机远程控制开发板 门禁系统 W ...
- HTML5 App商业开发实战教程 基于WeX5可视化开发平台
- J2EE学习从菜鸟变大鸟之八 企业级项目开发的思考
什么是企业级项目开发 "企业级项目".企业级项目开发,Java也是企业级项目开发,这个我们到处说.听,每天被我们挂在嘴边,可是到底什么项目才算是"企业级"?自己 ...
- APPCAN学习笔记001---app高速开发AppCan.cn平台概述
1.APPCAN学习笔记---app高速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移 ...
- 开发外包注意事项——iOS APP的开发
1. APP外包的流程是怎样的? 一般外包的项目都需要经常这几个流程: 1)需求沟通:双方沟通项目的需求,对项目的可行性进行分析 2)工作量评估:在确认了项目的需求后,外包团队对项目的价钱和进度进行评 ...
- 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享
什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...
随机推荐
- Leetcode 121. Best Time to Buy and Sell Stock 最佳股票售卖时(动态规划,数组,模拟)
题目描述 已知一个数组,第i个元素表示第i天股票的价格,你只能进行一次交易(买卖各一次),设计算法找出最大收益 测试样例 Input: [7, 1, 5, 3, 6, 4] Output: 5 最大收 ...
- CF796B Find The Bone
Zane the wizard is going to perform a magic show shuffling the cups. There are n cups, numbered from ...
- kuangbin专题七 ZOJ1610 Count the Colors (灵活线段树)
Painting some colored segments on a line, some previously painted segments may be covered by some th ...
- Le x820 的刷机记录
一定要卡刷,如果用线刷,那些线刷宝等会内置好多应用. 卡刷的ROM包,都属于“民间包”,而官方的recovery,是不允许刷第三方包的.所以我们要先刷recovery.(刷入第三方recovery,还 ...
- STS(spring tool suite)修改默认编码
安装STS后首先要做的修改默认编码: 1.windows--perferences--general--workspace,Text file encoding设置成utf-8 2.windows-- ...
- Android_靠谱的监听软键盘状态的方法
public class MyActivity extends AppCompatActivity { /** * 当前界面中的软件盘的状态 */private boolean isKeyBoardO ...
- 字符串转LocalTime再转Instant
LocalTime a= LocalTime.parse("20:13:01"); // LocalTime a= LocalTime.now(); System.out.prin ...
- 简单的Web日志分析脚本
前言 长话短说,事情的起因是这样的,由于工作原因需要分析网站日志,服务器是windows,iis日志,在网上找了找,github找了找,居然没找到,看来只有自己动手丰衣足食. 那么分析方法我大致可分为 ...
- aerospike(1)-centos7安装aerospike
要安装的软件:server和tools 下载地址:https://www.aerospike.com/download/server/4.5.1.5/ server: 1.下载 wget https: ...
- es6数组新方法
(1)Array.from(aarr,fn,obj) function fn(dr, sd, d) { /*Array.from 类数组转化为数组*/ console.log(arguments) v ...