学习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请求,响应方式也要有一定了解,这样才能更好的解析数据、展示页面。

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

时间: 2024-08-04 05:48:39

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

【华嵌】承接嵌入式&APP项目开发

武汉华嵌科技有限公司 项目开发范围:                                                                                              一.移动互联APP方向 1.Android 手机APP开发: 2.iOS手机APP开发: 3.HTML5移动互联APP开发 二.嵌入式系统方向 1.ARM+Linux方向的应用程序.系统移植与底层驱动开发: 2.单片机51系列.avr系列.msp430系列软硬件项目开发: 3

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

1.APPCAN学习笔记---app快速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移动应用快速开发一体化解决方案. 开发者利用HTML5+CSS3+JavaScript技术可以快速地开发与本地应用体验相媲美的移动应用. AppCan.cn平台提供了UI快速开发框架.本地功能调用API接口.应用打包系统.IDE集成开发环境和本地应用调试模拟器, 预置数百套界面模板和数十种应用插件,提

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

1, 项目开发,使用原型开发, ① 开发流程: 需求分析->设计阶段->编码阶段->测试阶段->发布阶段/维护阶段 需求阶段:PM/项目经理 对客户 设计阶段:技术人员(架构师,组长,程序员)->设计数据库 开发阶段:组长,程序员 测试阶段:测试人员 发布阶段:实施工程师 维护阶段:开发人员 ② 对应于php研发流程: 需求阶段:PM与项目经理定好需求,美工UI(ps画图)->网页前端人员UE(div+css),PM和项目经理根据静态页面与客户探讨不断修改: 设计阶段:

图书《HTML5 App商业开发实战教程》读后小感(一)

作者简介 马科,浙江省杭州人,毕业于陕西科技大学,起步科技创始人,中国计算机软件领域企业家. 2006年马科创办起步科技,立志打造国内"主流高效的开发工具",先后领导研发Justep X3.WeX5.BeX5平台等产品,核心基础产品WeX5开发工具完全免费.开源!极大的避免重复劳动,代码量减少80%以上. 我把作者(主编)头像放在文章始处,表达了我对本书的极端重视.从官方发布信息来看,后续还会有两本.尽管是针对初级读者,但是本书无论是形式还是质量,在本人看来,当属上乘.后续文章中,我会

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

1.APPCAN学习笔记---app高速开发AppCan.cn平台概述 1. 平台概述 技术qq交流群:JavaDream:251572072 AppCan.cn开发平台是基于HTML5技术的跨平台移动应用高速开发一体化解决方式. 开发人员利用HTML5+CSS3+JavaScript技术能够高速地开发与本地应用体验相媲美的移动应用. AppCan.cn平台提供了UI高速开发框架.本地功能调用API接口.应用打包系统.IDE集成开发环境和本地应用调试模拟器, 预置数百套界面模板和数十种应用插件,

企业app软件系统开发方案

app开发公司商宇科技表示:互联网+"是近两年最为火热的商业模式,而随着移动互联网时代的到来,移动互联网+将逐渐成为企业发展的主要方向.在如今APP软件开发的高潮时期,众多企业都想通过企业APP软件实现线上线下的联动,从而实现企业的移动营销战略. APP软件开发是企业开展移动互联网营销的基本工具,那么在开发APP软件之前要先做好哪些准备工作,从而让开发项目开展的更加顺利和流畅呢? 一.选好操作系统 开发APP软件,首先需要选择好操作系统.目前APP开发市场上最主要的操作系统是安卓和苹果ios.可

电商app功能开发流程+方案

hello,各位大咖!开发一款app到底有哪些流程?从零到完善运营,还有版本择选,方向度可精准?分享分享感想: 一款移动电商APP开发从零到完善运营,大概要经历一下几个步骤流程:1.电商APP开发需求:要开发制作一款移动电商APP,不仅仅要了解用户可以在APP上实现什么功能,还要了解企业为什么要制作一款电商APP,在这个基础上,要了解满足上面的功能,APP需要支持哪些功能.如果APP的功能仅仅与网页端的功能没有太大差异的话,那么开发的意义也不大.当这些确定后,再去跟开发制作公司去谈. 2.电商A

C#学习(九)之Windows Store App &amp; WP 开发小记(一)

由于课程已经讲述完毕,所以本次学习记录就讨论记录一下我在Windows Store App & WP开发中遇到的一些问题与收获. 一.数据库(Sqlite)的使用 虽然资料很难找,但sqlite在这两个平台的使用还是很简单的. 首先是环境配置阶段: 1.工具->拓展与更新->联机,然后在右上搜索sqlite,之后下载安装下图两个打勾的拓展包,注意要重启VS方才生效. 2.项目->管理NuGet程序包->联机,搜索sqlite,安装下图打勾内容,如果项目多出下图两个文件即安装

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技