标签：
这是我来到Baicare的第二个移动端项目，也是第一个和IOS + Android交互的项目。在这次项目中碰到了很多问题，也查了一些资料解决了一些问题，但总体还是不够满意，主要是在于第三方插件的使用上，另外也收获了一些与Server端及客户端交互的经验。
Server端需要将我做的静态页面与动态数据绑定，期间遇到以下问题：
1. 在写html页面时，要保证可以模板化，便于动态页面搭建。例如，将所有页面的头、尾、及主体内容的页面架构保持统一；尽可能达到使用一个模板就能包含所有页面的布局。也需要事先与Server端确认页面及相关JS、CSS、image等文件的目录结构。
2. 为不同页面添加不同Class类名作为区分时，不要加在作为模板的标签上，而是要新增一个标签，便于Server端判断，如：
错误：<div class="school-wrapper detail-page"></div>
正确：<div class="school-wrapper"><div class=" detail-page "></div></div>
3. 在特殊的模块或者需要有判断的模块时，要添加详细的备注并与Server端沟通，确保功能完善及页面结构正确。
<!--若已收藏，添加类名：selected-->；
<!--若为官方活动则在header-container上添加official类名-->
4. 本地调试Ajax功能时，会创建json文件作为数据源，但是本地静态post调用时会报405 (Method Not Allowed)的错误。
原因：Apache、IIS、Nginx等绝大多数web服务器，都不允许静态文件响应POST请求，否则会返回“HTTP/1.1 405 Method not allowed”错误。
解决方案：
步骤1：在web.config里添加json的MIME类型
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/x-javascript" />
</staticContent>
</system.webServer>
步骤2：Ajax中的post方法改为get方法
5. 本地调试完Ajax后，代码需切换成Server端正式使用的方法。
静态：
$.ajax({
type: ‘get‘,
url: ‘XXX.json‘,
data: { ‘p‘: currentPage + 1 },
contentType: "application/json",
success: function (res) {
...
}
});
正式：
$.post(‘XXX.json‘,
{ ‘p‘: currentPage + 1 },
function (res) {
...
}, ‘json‘);
在某些特殊页面上，HTML5页面需要与客户端进行交互，例如：点击分享按钮后，客户端需要接收到这个分享的操作信号，然后再通过客户端的原生代码进行分享的操作。
方法1：通过JS将命令以页面跳转的形式进行传递。
window.location.href = "baicareJSBridge://refresh";
方法2：通过<a>标签的href属性将命令进行传递。
<a href="baicareJSBridge://newPlayground"><img src="sites/img/i_post.png" /></a>
方法3：通过click事件，执行BaicareJSBridge方法，此方法会创建一个新的<iframe>标签，并将命令通过src属性进行传递。
不传参数：BaicareJSBridge.login();
传参数： var param = {
"href": url
};
BaicareJSBridge.setLocation(param, function () { });
这次嵌套使用了五个第三方插件，分别是youku API, iscroll, swiper, fastclick 和lazyload。总的来说，实现功能方面比自己写方便多了，但是却是一个大坑，有很多bug都是插件自身的bug，使用方较难修复，主要碰到的问题如下：
1. Youku API中的OnPlayEnd事件回调接口在移动端无效。和官方确认过，在移动端确实存在此问题，还未解决。
临时解决方案：
用setInterval方法实时监控，当player.currentTime()与player.totalTime()相同时，执行对应的操作。
2. iscroll在部分Android机器中会有单击一次，却会在当前位置点击两次的Bug。
解决方案：
修改iscroll.js中的代码
步骤1：去除onBeforeScrollStart里的阻止默认行为
onBeforeScrollStart: function (e) {
//e.preventDefault();
}
步骤2：添加onBeforeScrollMove里的阻止默认行为
onBeforeScrollMove: function (e) {e.preventDefault();}
步骤3：去除_end里的模拟事件
if (target.tagName != ‘SELECT‘ && target.tagName != ‘INPUT‘ && target.tagName != ‘TEXTAREA‘) {
ev = doc.createEvent(‘MouseEvents‘);
//ev.initMouseEvent(‘click‘, true, true, e.view, 1,
// point.screenX, point.screenY, point.clientX, point.clientY,
// e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
// 0, null);
ev._fake = true;
target.dispatchEvent(ev);
}
3. iscroll在动态加载完数据或者dom的高度进行变化后，会产生拖动不正常的bug。
解决方案：
步骤1：在动态加载完数据后，调用refresh方法。
步骤2：在onScrollEnd回调函数中，调用refresh方法。
4. Swiper中的onClick回调函数在部分Android机中无效。
解决方案：
重新通过zepto.js定义click事件。
5. lazyload + iscroll：当动态数据加载完后，图片没有被刷新，仍然显示的是缺省图片。
解决方案：
在定义iscroll的onScrollMove回调函数中，添加$("#iscrollDomID").trigger(‘scroll‘);
标签：
原文地址：http://www.cnblogs.com/violetye/p/4699752.html
