赶集团购开发总结4
DESCRIPTION
TRANSCRIPT
赶集团购 PC端效益日益上升；各大团购势力纷纷进驻移动互联网。
团购模式：每天推出若干商品，在限时内组织用户线上购买，购买人数达到最低限制时团购形成，参与用户均可以团购价格购买商品 /服务。团购是强 LBS应用，所以在移动互联网上推出产品势在必行。
项目背景
选择 html5的原因：1.减少沟通成本。由原来的 4个部门合作改成团购部门和 web移动开发组进行合作。客户端只是提供入口即可。
2.版本的快速迭代。不随着客户端的上线而上线，随时可以上线新的版本。
3.跨平台。一个版本对应两个客户端，节省了开发周期。
技术选型
整体架构
基于WEB的 app
Native language(
java Object c)
后端接口
HTML5 CSS3
JAVASCRIPT
HTML5， CSS3， JS
接口数据
Native language
下载最新的页面代码
进入赶集客户端
获取团购模块的版本号
点击进入团购模块
请求数据
使用本地缓存加载页面
整体架构 -加载方式
不是最新
已是最新 三块缓存页面
性能问题
下拉滚动不流畅
320条数据
滚动事件的简体以实现点击态
下拉滚动不畅
最多显示 20条数据
对android取消点击态
优化方案：1.减少显示条数。2.去除消耗性能的
js滚动监听
上下固定，中间滚动的定位
固定
固定
可下拉滑动
position: fixed;用于实现元素固定在页面某处的一种样式。在 ios5和android 4以下不被支持。固定菜单面板这样的样式单纯使用 css不能达到要求。
上下固定，中间滚动的定位
iScroll
使用 JS+CSS3来实现头尾固定的效果。 JS负责监听手指对屏幕的操作
(touchstart,touchmove,touchend)，控制 css3中的transform来实现页面上元素的滚动的。
优点：代码变得清晰简单。可以实现下拉刷新等功能。减少对客户端的依赖性。
缺点：在 android下不能使用，与原生实现的滚动性能相差太大。
方案一： iScroll
上下固定，中间滚动的定位方案二：拆分成三段
webview
webview
webview
把页面拆分成三个部分，上中下。中间超出的长度自然就有了滚动条。缺点 :更加依赖于客户端。结构被限制在上中下三个区域。
跨页面间的 JS 调用也提升了代码的复杂性。
优点 :性能得到提升。可以跨平台使用。
上下固定，中间滚动的定位
总结新的技术必须要在充分的测试情况下再去使用。网上基本上都没有提及 iScroll的性能问题。自己亲自测试，才知道还是有差距的。
部分效率问题可以由原生控件去实现。浏览器的转译引擎没有原生编译引擎效率高。
js与 native的通讯Android与 js
WebView
webkitwindow documnet
客户端新增接口
ganji(namespace)
native
javascript
Webview. loadUrl(“javascript:ganji.foo()")
js与 native的通讯iPhone与 js
UIWebView
webkit#showLoa
ding#showMa
p
监听URL的改变
改变URL的hash
native
javascript
evaluateWebScript:@”ganji.foo();
”
js与 native的通讯如何通过一个方法让 js可以通用于 android和ios ？
判断当前系统
直接调用 window对象内的方法
改变 hash，通知 ios需要调用本地方法
android ios
callNative(methodName,[args1,args2...]);
与 android和 ios定义的接口名称
接口所需要的参数
对这一层的封装可以对以后程序的维护，扩展，及错误定位起到了积极的作用。
本地存储
Webview 会接忽略 http请求 header头中的max-age 、 Cache-Control 、 cookie等参数，并不会缓存页面。
Webview不记录，接收 cookie。需要使用 localStorage 来记录本地数据。
调试
心得
Android和 ios对 JSON 字符串解析的区别。
Chrome， safari不能提供真实的效果。
优先适配 ios，再调试 android
一些细节
webview中不想点击的时候出现黄框焦点
在需要去掉焦点的节点上加上样式：-webkit-tap-highlight-color:rgba(0,0,0,0);
一些细节
Android1.6下不支持部分圆角，即 4个角，只需要其中某几个是圆角
Android 1.6不支持这样写：-webkit-border-radius:5pt 0 5pt 0 ;这样圆角在 1.6下需要改成：-webkit-border-top-left-radius:5pt;-webkit-border-bottom-left-radius:5pt;
一些细节
input type=number在 iphone下，长度超过 4位会出现” ,” 导致无法验证是否为整数。
换成 input type=phone，这样不会自动转换了
一些细节
element.className.indexOf('xx') 在 iphone下返回空。
element.className.indexOf(‘xx’) 在 iphone下返回空。这里需要注意一下，与 PC上的一些细节区别。
