【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