移动WebAPP开发注意点
第一个webAPP开发总结
转载自：http://www.vikingmute.com/archives/287
发表于 九月 13, 2012
这是我第一次做webAPP 前前后后总共大约是两个月 有几天加班很多 但是加班其实也没干什么 就是等在那里测bug 因为移动端开发的坑要比ie6还多很多 各种奇奇怪怪的问题 都会出现 但是还是很有收获 前前后后学到了挺多东西 在这里好好记录一下 如果哪个哥们也在做webAPP 你很可能遇到同样的问题 希望你google到这里可以让你省下我浪费的时间
总体架构
这是一个和高德合作的项目 具体的需求简单来说就是用户登录 注册 查酒店 酒店详情 下订单 信用卡担保 个人信息修改 这是一个在mobile端的web应用 内嵌在高德内核里 其实也就是等于嵌在一个浏览器当中 该项目要求兼容性支持ios4和以上版本的safari 还有android 2.3以上的安卓自带浏览器
由于这是一个对html5特性支持比较良好的环境 所以我们决定尝试用纯html和js的方法来完成该项目 和服务器交互的地方全部采用异步（Ajax） 当时我组的web服务已经完全剥离出来 采用RESTREST方式封装 架在一个服务器集群上
你可以用下面这个网址检查一下html5在pc端浏览器和mobile端浏览器的支持性 你会发现mobile端对html5特性的支持是非常不错的
我们没有用jquery mobile等框架 当时看到jqmobile加载文件较多 而且api有点复杂 我们的界面和jquery mobile的一些封装好的控件不一致 所以我们使用了轻量级的框架zepto.js
他的优点 轻量级 针对mobile浏览器 只有8.4k 兼容所有jquery语法 不需要重新学习 节省时间 而且提供基本的mobile事件 比如tap longtap swipe 等
缺点：对事件的支持不太好 在有些版本的浏览器中 触发比较困难
界面：
界面全部采用了css3来实现 图形渐变 阴影 图标都用css3来渲染
动画：
一开始是用javascript来实现动画 然后发现在手机上几乎卡到哭 然后立马换用了css3 animation 发现效率快了很多 效果也不错 关于css3动画 在这里了解更多
http://www.w3schools.com/css3/css3_animations.asp
这个库有很多炫酷的效果
模板引擎：
由于是全异步取得数据 有大量的数据渲染成html的工作 在这里 使用了糖饼所写的artTemplate
artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。
而且有丰富的自定义语法 比Mustache这种logicless的模板引擎写起来方便很多
地址：https://github.com/aui/artTemplate
HTML5 API
本次项目采用的HTML5 API有
Geolocation，用来定位当前经纬度 然后用该参数调用高德api
SessionStorage和localStorage：由于用HTTP为无状态协议 而且html没法像服务器端脚本语言一样使用session cookie不太够大 所以采用了sessionStorage来存储一些用户登录后的状态和标识等，用localStroage来cache一些已经异步取得的信息（如酒店列表等）第二次显示的时候就不用再次异步了
服务器端CORS：这次项目遇到的一个大问题 就是跨域问题 当然跨域问题有n多种解决方法 最常见的有jsonp（仅支持GET请求） 还有隐藏iframe（用iframe来进行post） 当然现在有一个新的方法 当服务器可控的时候 可以采用新的标准
这就是CORS（Cross-origin resource sharing）http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
CORS是
Cross-Origin Resource Sharing (CORS) is a specification that enables a truly open access across domain-boundaries. With this site we want to support the adoption of CORS.
简单说就是一种服务器的许可 当你开启CORS的时候 就可以直接跨域向该地址发送http请求了 只需要在服务器配置中添加
Access-Control-Allow-Origin: *
下面这个地址 详细讲解了在各个不同的服务器怎样开启cors http://enable-cors.org/
当然新东西肯定都有各种各样的浏览器兼容性问题 幸好在mobile浏览器里面 支持度还是很不错的 http://caniuse.com/#feat=cors 不过我镇的浏览器经过我测试（海豚 遨游 UC）都不支持CORS 幸好这个项目是内嵌在原生浏览器的 所以就混过去了 而其他的一些mobile端浏览器（firefox，opera mobile）都很好的支持Cors，桌面版的ie浏览器不支持 而是微软又另辟蹊径的搞出一个xdomainRequest的对象 这里暂且不表
加密：
在这上面花的时间很多 由于有信用卡担保页面 要把信用卡密码传送给后台 为了防止http请求被抓取 导致用户信息泄露 所以需要一个前后台通用的算法 并且是对称加密算法 （这样就排除了MD5 和 sha1这样的单向加密算法） 然后研究了AES和DES 但是用js加密以后用c#解密就会出现各种问题 换了几套不同的js库出来的结果都不令人满意 最后只能。。。这个方法不说了 想用js加密库的可以参考下面的库 想了解AES DES的 自己google吧 挺复杂的
http://code.google.com/p/crypto-js/
上面把基本的技术点写完了 然后就是伟大的bug和坑了！
兼容性问题
打开调试
当你遇到在pc浏览器里面没有问题 但是到手机浏览器里面发现问题的时候 要是不能找到错误就悲催了 幸好ios和andriod浏览器都可以打开调试功能 可以让你知道问题出在哪里了
ios打开调试 ：打开 设置 — safari — 开发者— 调试控制台
然后打开safari以后会发现上面会有一个蓝色的调试工具条 会告诉你现在有没有js错误
一堆图的教程 是人就能看懂：http://browsers.about.com/od/allaboutwebbrowsers/ss/iphonedebugger.htm
android打开调试 ：打开浏览器 然后在地址栏输入about:debug 回车 然后选择 菜单 – 更多 – 设置里面就有了很多新的选项（如下图） 然后勾选上你需要的以后 在浏览器里面就会有一个调试控制台了
非常详尽的教程在这里（里面附各种图 很易懂）：http://android.stackexchange.com/questions/5999/android-browsers-aboutdebug-what-do-those-settings-do
ios私密模式：
当用户打开safari的私密模式的时候 会造成浏览器的sessionStroage模块失效 然后js会报错 所以开始要检测用户是否开启私密模式
用下面这个方法来检测 如果开启 就要提示用户
(function(win){
var _checkPrivate = function(){
var testKey = 'qeTest', storage = window.sessionStorage;
var result = true;
try {
// Try and catch quota exceeded errors
storage.setItem(testKey, '1');
storage.removeItem(testKey);
result = true;
} catch (error) {
if (error.code === DOMException.QUOTA_EXCEEDED_ERR && storage.length === 0){
result = false;
}else{
throw error
};
}
return result;
}
if(!win.Ctrip) win.Ctrip = {};
win.Ctrip.checkPrivate = _checkPrivate;
})(window);
android事件穿透：
经典的bug 当你弄出一个浮层来显示一些信息 当给浮层上面的元素绑定事件 事件触法的时候 事件会穿透同时触发浮层下面的事件 很蛋疼很ie6的一个bug 修复方法 可以看看这篇总结 非常详细
http://www.qiqicartoon.com/?tag=android
android overflow：auto 时无法滑动
当你想把一段很长的内容固定高度 然后超出的地方会出现滚动栏 这个用css当然很好实现 加一个overflow：auto就可实现 但是在android2.3上就会出现滚动条没有出现 然后内容滑动不了的问题。
用一个很牛逼的库解决该问题（很强大）：http://cubiq.org/iscroll
或者用一段简单的代码来实现可以滑动：http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
代码如下：
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
不要把null当作参数传入json.parse或者json.stringify方法中：
andriod2.3如果如此调用会直接报错 判断一下再搞
手机端浏览器绑定click事件的时候 会产生一个300ms的延迟 所以你会感觉每次点击以后会延迟一下子 这个下期会改掉 现在都提供了tap事件 用来模拟手机的点击事件 但是绑定tap事件以后 在电脑的浏览器里面点击不会触发 怎么办呢？ 看下面这个链接：
差不多就这样了 想到什么以后再写。。
