赶集团购开发总结4

赶集客户端——团购模块开发总结

移动互联网事业部 -何知翰

项目背景团购结构技术选型整体架构开发中遇到的问题

赶集团购 PC端效益日益上升；各大团购势力纷纷进驻移动互联网。

团购模式：每天推出若干商品，在限时内组织用户线上购买，购买人数达到最低限制时团购形成，参与用户均可以团购价格购买商品 /服务。团购是强 LBS应用，所以在移动互联网上推出产品势在必行。

项目背景

涉及的部门：团购部门提供团购的数据。移动后台组封装数据，提供给客户端。客户端展示数据。 (客户端分为 ios和

android)

团购结构

选择 html5的原因：1.减少沟通成本。由原来的 4个部门合作改成团购部门和 web移动开发组进行合作。客户端只是提供入口即可。

2.版本的快速迭代。不随着客户端的上线而上线，随时可以上线新的版本。

3.跨平台。一个版本对应两个客户端，节省了开发周期。

技术选型

整体架构

基于WEB的 app

Native language(

java Object c)

后端接口

HTML5 CSS3

JAVASCRIPT

HTML5， CSS3， JS

接口数据

Native language

下载最新的页面代码

进入赶集客户端

获取团购模块的版本号

点击进入团购模块

请求数据

使用本地缓存加载页面

整体架构 -加载方式

不是最新

已是最新 三块缓存页面

开发过程中遇到的问题性能问题上下固定，中间滚动的定位javascript与 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 View拆分虽然代码逻辑复杂了，但是为了代码的通用性与可维护性，最终选择了 webview的拆分。

上下固定，中间滚动的定位

总结新的技术必须要在充分的测试情况下再去使用。网上基本上都没有提及 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定义的接口名称

接口所需要的参数

对这一层的封装可以对以后程序的维护，扩展，及错误定位起到了积极的作用。

本地存储

疑问为什么不使用使用浏览器的缓存策略？为什么不直接使用 cookie ？

本地存储

Webview 会接忽略 http请求 header头中的max-age 、 Cache-Control 、 cookie等参数，并不会缓存页面。

Webview不记录，接收 cookie。需要使用 localStorage 来记录本地数据。

调试

后端与 JS接口的调试UI的调试客户端与 JS接口的调试

服务器

HTML5客户端

调试后端与 JS接口的调试

调试服务器

使用 PC，用

chrome， safari来模拟客户端环

境，通过工具去查看抓取的请求

调试样式的调试

调试Weinre 实机测试

调试客户端与 JS接口的调试

调试HTML5

优先在iphone上测试，相对于android的

调试，更透明清晰

调试

心得

Android和 ios对 JSON 字符串解析的区别。

Chrome， safari不能提供真实的效果。

优先适配 ios，再调试 android

一些细节

webview中不想点击的时候出现黄框焦点

在需要去掉焦点的节点上加上样式：-webkit-tap-highlight-color:rgba(0,0,0,0);

一些细节

莫名其妙的出现横向滚动条

检查一下，极有可能是添加阴影造成的。如果 X 轴的偏移不等于阴影的发散长度，就会出现横向滚动条。

一些细节

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上的一些细节区别。

谢谢！