文档章节

【WebApp】离线webapp (iPad版本)开发手记

呢喃的猫咪
 呢喃的猫咪
发布于 2012/09/08 13:12
字数 1762
阅读 414
收藏 4

因为是来公司之后接手的第一个项目,而此前公司从未接过同类型的项目,所以,工作中遇到的困难完全超乎我以及各位头头的想象。当然,他们是停留在想,而我要做的是解决这些问题,最终出成果。

此前一直做网站,没有做过web app,更别提Hybrid App,所以,这两个月以来,各种问题层出不穷。回归正题,说说具体遇到的问题,虽然很多问题最终只是被我绕过去了,但是,我知道下次绝对不会。

1.关于iPad不同版本的问题

[关于动画--全屏左右滑动显示问题]

其实ipad三个版本在模样上没差多少,当然2比1多了个摄像孔,但是性能上却相差不少。我对硬件没研究,不知道怎么表达。只知道,做全屏滑动效果时,iPad2和3,加载本地资源如图片等的速度相当快,滑动效果非常流畅。之前尝试着用css3自己写了一个动画效果,在在ipad2和3上效果不错,但是在ipad1上滑动时,即使图片已经完全加载完毕,滑动时仍然有撕裂的效果,被头否决了。于是选用了Tween这个插件,这个被我整合到用户随机进入某个页面时,上下页之间的滑动衔接效果。还用了swipe.js这个插件,有些页面拥有整屏幻灯,于是挑了swipe这个插件。插件的好处就是大牛们都封装的相当漂亮,拿来用就行。

可惜的是,粗略看了下别人得代码之后,还是没明白自己写得问题在哪。还需要事件研究。

[关于分辨率--图片精度问题]

最郁闷的就是图片精度问题了,iPad3的精度是iPad2的两倍。我对图片的精度以及像素尺寸现在仍然很晕,不太明白其终究原因。譬如,我将一张1024*768(像素)的图片放到iPad3上,非常模糊,此时,我在样式中定义图片的大小为1024px*768px。让设计除了一张,内容一样,但是为2048*1536(像素)的图片,我放到iPad3上,图片大小仍然给的是1024px*768px,此时,图片显示得非常清晰。这个差异知道之后是小事,但是因为没有知道,所以到了要交第二个demo演示版的时候,才突然发现这个问题。哎,测试不到位,临阵手忙脚乱。

到网上搜了一些图片方面的知识,都是大堆术语,我现在又忘了,哎。这是我的软肋所在。

[关于safari问题--不同iPad不同版本,且与pc上大有不同]

哎。。。。没时间写了。。。。下下周项目完工之后再写吧。。。

2.关于页面结构和样式问题--包括如何兼容iPad123的问题

3.操作本地数据库回调问题、在异步中同步、在同步中异步然后解决同步需要(总之,各种凌乱)

4.对象封装问题--接口、属性神马的东东

5.全局变量问题--全局变量控制问题

6.全局js结构问题--

7.事件注册问题--重新绘制DOM比解除绑定更好

8.js文件拆分问题--

9.js模板解析问题--

10.js数据解析问题--

11.所用到的插件:

plugin-iscroll.js // 上下滑动,支持移动手持设备触摸滑动

plugin--swipe.js// 左右滑动

pl-menu.js //水滴菜单效果

12.触摸门事件--多指触控,每只手指离开屏幕时都会导致刷新touch事件

----------------------------------------------------------------------------------------


【1】【ipad的safari中,相对外层绝对浮动的曾必须有固定高度和宽度(参见moen项目首页右下角播放图标)】


【2】【vedio.purse()和vedio.play()在pc的safari上不兼容的,但在ipad里兼容】


【3】load()可以用来判断dom元素,如img是否加载成功。但是,当图片已经加载过。再次进入这个页面时,由于有缓存,图片将不再加载,从而导致load()中的程序块不运行。所以在load之前必须判断,图片的大小是否已经为加载完成后的大小。


注意:此处img不可以用css来定义样式,否则将导致判断失败。


【4】【ipad safari不支持html5里音频的自动播放,但支持play()方法】


注:【pc 上safari 不识别play()方法,并会报错导致js停止运行】


按html5的规则如下代码:

    <audio src="jadk_1_1_2_converted.mp3" controls autoplay loop >

    HTML5 audio not supported

    </audio>

在chrome浏览器里都可以自动播放mp3音频,但是在ipad safari里却不能自动播放,需要点击播放才可以播。


以前在ios4中可以用iframe来调用mp3实现自动播放,代码如下:

<iframe height="10" width="100" frameborder="0" src="jadk_1_1_2.mp3" ></iframe>

但是在ios5后就不能自动播放了


/*

**可以把play()或stop()注册到其它dom元素的点击事件上,也会促发播放和停止的效果。但一定必须是点击事件。而且,这个dom元素需要跟audio元素处于相同的位置。参见moen项目中,首页和菜单页右下角的点击播放按钮。

*/


/*

**另一种方法是交给后台处理,向服务器发送请求判断播放哪首音乐和播放次数以及暂停等效果。

*/


/*

**还有一种办法是,如果是把web装载成app形式,可以通过做以下设置,让声音自动播放。

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

**webview.allowsInlineMediaPlayback = YES;


self.webView.allowsInlineMediaPlayback = YES;

    self.webView.mediaPlaybackRequiresUserAction = NO;



*/


【5】【ipad 中 safari的click事件注册问题】


/*

**只能注册在能本身就拥有点击事件属性的元素上,如input,如button,如a,如img。记住,此处,a必须加上href属性才能注册点击事件。

*/


【6】audio 高度问题设置


在mobile safari中,即使将不需要显示的 audio 的 display 设为 none,也会占用高度。最好的办法是,将display设为none的同时,也设置 position 为 absolute,然后设置偏移。这样就不会占用高度了。


【7】audio(video)stop() 和 pause()问题


在ipad的safari中,使用stop()会导致报错,音乐并不能停止播放。但可以使用pause()事件,让音乐暂停播放。


【8】为a 注册click事件之后,点击a,a会有灰色背景。如果想消除,只能将事件注册到a内的img上,或者,给a注册touchmove事件。


【safari开发文档及帮助文档】

http://www.apple.com/hk/safari/what-is.html

https://developer.apple.com/devcenter/safari/index.action

http://www.cnblogs.com/hokyhu/archive/2012/01/18/2325833.html

http://www.longtengcn.com/ltnews/20101925111959.html

http://tech.it168.com/a2011/0531/1198/000001198194_2.shtml

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

http://mobile.51cto.com/iphone-280221.htm

http://www.chineselinuxuniversity.net/articles/42551.shtml

http://www.cnblogs.com/rayoctopus/archive/2011/07/22/2113441.html

http://software.intel.com/zh-cn/articles/javascript-first-class-citizen-function/?cid=sw:prccsdn229032

http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html


© 著作权归作者所有

呢喃的猫咪

呢喃的猫咪

粉丝 135
博文 187
码字总数 300722
作品 0
楚雄
其他
私信 提问
【WebApp】单页webapp应用开发总结【暂完】

(写在开头:优化篇大量都是传闻,大家自行挑拣中意的看。附个学习地址,当然,我还没看过,哈哈!尊重作者附地址:http://mobile.51cto.com/web-410291.htm) 性能体验优化: 1、是否需要小...

呢喃的猫咪
2013/12/11
7.8K
7
【WebApp】webApp开发总结(集合转贴)

【来源地址】 http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html http://classjs.com/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/ http://java-mans.iteye.com/......

呢喃的猫咪
2012/11/09
1K
1
jquery mobile + sae开发手记

Jquery mobile无疑是一个优秀的JS框架,但到现在为止,还是没有看到基于jqm在移动平台上让人眼前一亮的应用,大家都在观望,到底webApp在移动平台上的定位如何。 这个月,基于SAE提供的移动平...

memorybox
2012/04/27
1K
8
针对开发者的21款移动开发框架

随着移动互联网的持续升温,企业选择开发对应的webapp网站已经成为了必要。下面笔者收集了21款针对开发者的移动开发框架,基于它们可以快速开发一个webapp网页或者hybridapp混合app,或者一些...

丨小丶牧灬
2015/07/23
514
2
密切移动端 CSS 框架发布 v1.1 版本

这次更新新增了弹窗dialog登陆版本、confirm确认版本,新增手机移动端的栅格化系统,新增数据表格、加载动画组件,最主要在于手机端的栅格化系统,与传统pc不同,是专门针对于手机小屏幕的栅...

专注做前端
2015/07/02
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

Java 文件类操作API与IO编程基础知识

阅读目录: https://www.w3cschool.cn/java/java-io-file.html Java 文件 Java 文件 Java 文件操作 Java 输入流 Java 输入流 Java 文件输入流 Java 缓冲输入流 Java 推回输入流 Java 数据输入...

boonya
28分钟前
3
0
SDKMAN推荐一个好

是在大多数基于Unix的系统上管理多个软件开发工具包的并行版本的工具。它提供了一个方便的命令行界面(CLI)和API来安装,切换,删除和列出sdk相关信息。以下是一些特性: By Developers, fo...

hotsmile
53分钟前
8
0
什么是 HDFS

是什么? HDFS 是基于 Java 的分布式文件系统,允许您在 Hadoop 集群中的多个节点上存储大量数据。 起源: 单机容量往往无法存储大量数据,需要跨机器存储。统一管理分布在集群上的文件系统称...

Garphy
56分钟前
5
0
一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
今天
11
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部