`

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那样做过性能处理。效果有点卡。

分享到:
评论

相关推荐

    iPhone & Android 智能手机客户端软件技术方案

    iPhone和Android智能手机客户端软件技术方案主要针对的是集成了Web2.0技术,并融合了BBS、SNS、博客、微博等多种网络应用的大学生互动网站。方案从整体上讲解了客户端开发的方式、系统支持的运行版本,以及技术方案...

    DeepSeek多平台部署指南:Ollama本地、移动端及Open WebUI环境配置

    接着讲解了DeepSeek在移动设备(iOS和Android)上的部署细节:iPhone需要通过Safari安装快捷指令,配置API Key并通过快捷指令测试运行;Android则借助Termux安装必要组件,并手动搭建Ollama环境以加载和测试模型。...

    软件工程与移动应用开发.pptx

    - **Java:** Android平台的主要开发语言。 - **Swift:** iOS平台的主要开发语言。 - **C#:** Windows Phone平台的主要开发语言。 **移动应用测试:** - **功能测试:** 验证应用的各项功能是否按预期工作。 - **...

    DeepSeek多平台部署指南:涵盖本地、手机端及Open WebUI部署详解

    对于 iPhone 来说,部署涉及安装快捷指令和取得 API Key 步骤,Android 则依靠 Termux 软件执行相似的功能集合。基于 Open WebUI 的部署同样覆盖到了从基础工具如 Docker 和 Ollama 的搭建,直至具体操作来获取并...

    多平台环境下DeepSeek模型部署指南:Ollama本地、移动端及WebUI部署方案详解

    针对手机用户的 iPhone 和 Android 分别提供了使用快捷指令及 Termux 实现的特定操作流程;对于Web应用,介绍使用 Open WebUI 组件,利用Docker容器化环境集成和管理模型的方式,让用户体验到通过浏览器即可访问并...

    DeepSeek 多平台部署指南-基于Ollama本地部署、移动端与WebUI集成

    此外还涵盖了手机端部署细节,如 iPhone 和 Android 平台上借助不同的应用程序和服务接口实现实现 DeepSeek 模型调用的方法论;最后讨论了通过 Open WebUI 结合 Docker 方案进行图形化管理的具体实施路线。 适用人群...

    HTML5基本介绍.pdf

    实际上,许多最新的浏览器(如Safari 5、Firefox、Chrome、Opera和Internet Explorer 9)以及智能手机平台(如iPhone和Android)已经支持HTML5的部分功能。尤其是在智能手机和平板电脑等移动设备上,HTML5的应用变得...

    iScroll4框架

    这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的...

Global site tag (gtag.js) - Google Analytics