【WebApp】离线webapp （android）开发
只为在os交流！禁止转帖！谢谢！
-----------------------------------------------------------------------------------
【净水宝webapp】（android）
一、用户设备
台电8寸平板P85HD
屏幕尺寸：8英寸 电容式触摸屏
操作系统：Android4.1
屏幕分辨率：1024x768
浏览器：uc浏览器
华为平板S10-201WA
屏幕尺寸：8英寸 电容式触摸屏
操作系统：Android4.0
屏幕分辨率：1080x800
浏览器：系统自带浏览器
二、项目需求
1、仿本地应用效果，离线使用。
2、JS和CSS3效果。
3、操作本地数据库。/具体流程是，用户提供需要更新的资料。AE在云端录入，down下数据库文件和相关图片等资源，下载到本地，利用JS将数据文件写入本地sqlite数据库。/
4、每次更新，重新生成apk，发给用户自己安装到设备。
三、JS框架插件
JS框架：
1、phonegap：最外层壳子，不多说，官网：http://phonegap.com
2、blackbone：（最后没用到）JS的mvc框架，官网：http://backbonejs.org
站内两篇文章，地址：Backbone 模型，Backbone 视图
3、jquery：这个更不用说了，官网：http://jquery.com
JS插件：
1、iscroll-v4.2.5.js：滚动插件，不错，很简单容易上手，css3滑动效果很流畅，快速滑动的缓冲处理很赞。
2、touchy.js：触摸插件，最后被舍弃
3、video.js：安卓这个垃圾竟然无法正常播放视频，只好用同事帮忙写的插件
四、总体思路
五、项目中遇到的纠结
1、换MAC之后重新建项目，对项目部分参数修改以及模拟器操作等（部分内容适用于pc）
【mac】从零开始创建Cordova for android 项目
2、模板问题：不是所有的浏览器都支持离线load文件；
【离线webapp开发 - backbone模板】文件加载在不同浏览器中的反馈
3、错误提示：miss a drag as we are waiting for webcore's response for touch down
参考解说：点击查看
错误场景：
首先，我用的touchy.js做的触摸事件监控，在台电上面正常运行，在华为pad上面报错；然后，我在保留touchy.js事件监控的情况下，对需要捕捉touch事件的div，用js原生的监听方法进行了监听，发现app可以正常运行，但是仍然报上面的错误。
最后结果：
Google之后，发现，这个是 androidwebview的一个bug，即必须在每个事件中进行 event.preventDefault（该方法将通知Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作），才能保证touch的正常捕获。还是会继续报上面的错误，比较纠结。希望有大神可以做更详细的说明。但是，点击事件却无法捕捉了，所以这个方案只能被枪毙了。
悲催的touchy.js事件注册处理函数的参数中，不包含event，所以只能舍弃。
代码示例：
var touchPage = document.getElementById("app_page");
var spirit, startX, startY,endX,endY;
touchPage.addEventListener("touchstart",function(event){
event.preventDefault();
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
console.info("Listener startX : " + startX);
console.info("Listener startY : " + startY);
},false);
touchPage.addEventListener("touchmove",function(event){
var touch = event.touches[0];
endX = touch.pageX;
endY = touch.pageY;
},false);
touchPage.addEventListener("touchend",function(event){
// 在华为pad中，捕获touchend事件时，event.touches数组长度为0。
var touch = event.touches[0] || event.changedTouches[0];
endX = touch.pageX;
endY = touch.pageY;
console.info("Listener endX : " + endX);
console.info("Listener endY : " + endY);
},false);
4、错误提示：setBufferCount: bufferCount larger than slots available
app启动之后报错，Google之后，又一个传说中的android上的bug，不太懂。
参考地址： 点击查看
5、移动开发小结
http://my.oschina.net/maomi/blog/169550
6、触摸事件中的event对象和touch对象
每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
其中 touch包含以下属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标。
可参考：https://developer.mozilla.org/zh-CN/docs/tag/touch
7、鼠标event属性大全
altKey: false bubbles: true button: 0 cancelBubble: false cancelable: true charCode: 0 clientX: 671 clientY: 304 clipboardData: undefined ctrlKey: false currentTarget: null dataTransfer: null defaultPrevented: false detail: 1 eventPhase: 0 fromElement: null keyCode: 0 layerX: 671 layerY: 304 metaKey: false offsetX: 671 offsetY: 199 pageX: 671 pageY: 304 relatedTarget: null returnValue: true screenX: 671 screenY: 399 shiftKey: false srcElement: div#container.container_l target: div#container.container_l timeStamp: 1382600515553 toElement: div#container.container_l type: "click" view: Window webkitMovementX: 0 webkitMovementY: 0 which: 1 x: 671 y: 304 __proto__: MouseEvent