当前位置: 代码迷 >> Web前端 >> iPhone Android Web开发(要略)
  详细解决方案

iPhone Android Web开发(要略)

热度:1283   发布时间:2012-06-30 17:20:12.0
iPhone Android Web开发(概要)

一、?前端使用技术

JavaScript?jQuery?Html?Json、ajax

二、?jQtouch

jQtouch只是?jQuery的插件?,它的作用是封装?iPhone?Safari的特性效果实现?.

包含:

a)???????页面的切换动画效果?(缺点:仅仅是页面切换不包含模块切换?)

b)???????简单的?ajax应用

c)???????iPhone特性(重力感应、手势操作等)

以上三点用来开发?iPhone特性的?WEB足够了。

?

下面全面解析?jQtouch的运行原理:

a)???????页面解析:

?

?

?????????页面由三部分组成,标题栏、内容块、底部导航。这是正规的布局方式,当然随着项目需求这个布局可以打乱。但是从整体来看,每个显示的窗体即是一个页面,窗体等同于传统的页面。

b)???????动画效果解析:

?

???????????页面之间的切换其实就是通过?CSS?display来操作,但是?Safari提供了一种更为流畅而且效果更好的方法,也是?CSS。所有?javascript操作有个弊端,那就是切换页面无法返回的问题,这里采用了记录?hash的方式来处理返回操作,当每次切换的时候都记录在?hash容器内了,所切换的效果、页面的?KEY都需要记录在内,为了保证切换后保存切换的动作。

这里简单的来看一段代码:

?????????? CSS?

?????????????????????????????????????@-webkit-keyframes?fadein {

??? ?????????????????from?{?opacity:?0?; }

??? ?????????????????to?{?opacity?:?1?; }

}

?

@-webkit-keyframes?fadeout {

??? ?????????????????from?{?opacity:?1?; }

??? ?????????????????to?{?opacity?:?0?; }

}

.fade.in?{

??? ????????????????z-index?:?10?;

??? ????????????????-webkit-animation-name?:?fadein?;

}

.fade.out?{

??? ????????????????z-index?:?0?;

}

?

以上?CSS片段表示了渐显的效果,页面切换效果为渐变的方式来处理。?From to表示从和去。在程序中又如何去处理?

接下来再看?jQuery的处理:

???????????jQuery?

?????????????????? ????????????????????????????toPage.addClass('fade in current'?);

fromPage.addClass('fade out'?);

????????????当然上面代码可以正常切换页面,而且是渐显切换。但是这还不够,处理要?干净,当某些样式不需要的时候就必须把它清除。

????????????? jQuery?

??????????????????if?(animation) {

??????????????????? ?????? toPage.removeClass('in reverse fade'?);

??????????????????? ?????? fromPage.removeClass('current out reverse fade'?);

??????????????? ????? }

??????????????? ??????else?{

??????????????????? ?????? fromPage.removeClass('current'?);

??????????????? ????? }

上面是翻页的情况,下面返回依次类推?,?做逆向操作。当然仅仅只是页面对象逆向而已。如果是逆向代码有一点不一样:

??? jQuery?

???????????????????????????????????????????????toPage.addClass('fade in current?reverse ');

fromPage.addClass('fade out reverse '?);

?

c)???????Ajax解析:

d)???????重力感应解析:

iPhone中的?Safari本身就具有重力感应,我们可以通过两种途径来处理和判断是否发生了改变。

1)???????通过?Safari?onorientation?事件来监听

实现方式如下:??

jQuery:

??????? ??????????? $('body'?).unbind('turn'?).bind('turn'?,?function?(e, info) {

??????????????? ??????????if?(info.orientation ==?'profile'?) {

??????????????????? ???????????//alert('?正常显示屏幕?');???????????????

??????????????? ????????? }?else?{

?????????????????? ????????????//alert('?变成顺时针屏幕?');

??????????????? ????????? }

?});

Js:

window.onorientation =?function?() {

??????????????? ??????????var?orientation = window.orientation;

??????????????? ??????????switch?(orientation) {

??????????????????? ???????????case?90:

??????????????????? ???????????case?-90:

??????????????????????? ???????????//alert('??');

??????????????????????? ???????break?;

??????????????????? ???????????default?:

??????????????????????? ???????????//alert('??');

??????????????????????? ???????break?;

??????????????? ????????? }

}

2)???????通过判断页面宽度来监听

实现方式如下:

$(window).unbind('resize'?).resize(function?() {

??????????????? ??????????if?(!(window.innerWidth < window.innerHeight)) {

??????????????????? ???????????//alert('?侧屏?');???????????????????

??????????????? ????????? }?else?{

??????????????????? ???????????//alert('?正屏?');

??????????????? ????????? }

});

上面两种方法都是处理重力感应的方法,其中第二种方法是判断浏览器变化而处理重力感应的。正常显示屏的尺寸是?420X320 ,?侧屏的尺寸正好相反。所以可以利用这一点。

?

e)???????手势操作解析:

手势操作分为:

1.???????单指操作

单指可以理解为鼠标,即最普通常见的操作,单指操作在?iPhone中最常见的操作就是单指手刷翻页功能

?

2.???????双指操作

双指操作用鼠标是模拟不出的,双指联合起来操作可以对图片放大缩小、文字的放大缩小操作,旋转图片。

?

单指操作用到的事件为?touchmove??touchend??touchmove?的用途是记录当前手指移动的区间(?X??Y?坐标轴位置)和最后是否进行操作的决策。?Touchend?则是将记录清除。

?

双指操作作用到的事件为?gesturechange??gestureend??geaturechange?的用途是获取双指移动的区间大小(当然也可理解为指头之间的距离),?gestureend?则是停止操作后,项目中用作来放大字体。预设字体大小加上区间大小来决定放大的字体大小。当然也应该有一个字体大小边界值。

?

三、?Android

Android手机也是基于?webkit的浏览器,同样兼容?jQtouch开发出来的?iPhone Web?,但是目前android手机关于?WEB方面的资料非常少,甚至找不到。所以目前还需要做大量的可行性分析。

比如重力感应,暂且只能用检测浏览器的变化,判断页面宽度来处理。手势操作则失效。而页面切换兼容,但是浏览器没有像?iPhone Safari那样做过性能处理。效果有点卡。

  相关解决方案