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

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

此前一直做网站,没有做过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


你可能感兴趣的:(【WebApp】离线webapp (iPad版本)开发手记)