你的位置:首页 > 软件开发 > 操作系统 > 学习html5 app项目开发

学习html5 app项目开发

发布时间:2015-05-22 12:00:06
这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目。与其说是项目需要,其实更大部分是我自己想要做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='/images/loading.gif' data-original="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src='/images/loading.gif' data-original="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项目开发

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。