0
赶集客户端 ——团购模块开发总结     移动互联网事业部-何知翰
项目背景团购结构技术选型整体架构开发中遇到的问题
项目背景赶集团购PC端效益日益上升;各大团购势力纷纷进驻移动互联网。团购模式:每天推出若干商品,在限时内组织用户线上购买,购买人数达到最低限制时团购形成,参与用户均可以团购价格购买商品/服务。团购是强LBS应用,所以在移动互联网上推出产品势在必行。
团购结构涉及的部门:团购部门提供团购的数据。移动后台组封装数据,提供给客户端。客户端展示数据。(客户端分为ios和android)
技术选型选择html5的原因:1.减少沟通成本。   由原来的4个部门合作改成团购部门和web移动开发组进行合作。客户   端只是提供入口即可。2.版本的快速迭代。   不随着客户端的上线而上线,随时可以上线新的版本。3.跨平台。   一个版本...
整体架构                                    Native language             HTML5 CSS3             JAVASCRIPT后端接口           Native...
整体架构-加载方式          进入赶集客户端            获取团 不是最新       购模块            的版本下载最新的页面      号   代码              已是最新          三块缓存...
开发过程中遇到的问题 性能问题 上下固定,中间滚动的定位 javascript与native language的通讯 本地存储 测试 细节问题
性能问题         滚动事                             对         件的简                           android         体以实                  ...
上下固定,中间滚动的定位  固定       position: fixed;用于实现元素固定在页  可  下    面某处的一种样式。在ios5和android  拉    4以下不被支持。固定菜单面板这样  滑  动    的样式单纯使用c...
上下固定,中间滚动的定位方案一:iScroll                                iScroll               使用JS+CSS3来实现头尾固定的效果。JS负责监听手               指对屏...
上下固定,中间滚动的定位方案二:拆分成三段              webview                        把页面拆分成三个部分,上中                        下。中间超出的长度自然就有了     ...
上下固定,中间滚动的定位iScroll    View拆分                    虽然代码逻辑复杂了,但是为了                    代码的通用性与可维护性,最终                      选择了...
上下固定,中间滚动的定位总结新的技术必须要在充分的测试情况下再去使用。网上基本上都没有提及iScroll的性能问题。自己亲自测试,才知道还是有差距的。部分效率问题可以由原生控件去实现。浏览器的转译引擎没有原生编译引擎效率高。
js与native的通讯Android与js                  WebView                                      客户端新                  Webview.       ...
js与native的通讯iPhone与js                  UIWebView                                       监听URL     evaluateWebScri          ...
js与native的通讯如何通过一个方法让js可以通用于android和ios?                                           对这一层的封装可以对以后程序的维                       ...
本地存储疑问为什么不使用使用浏览器的缓存策略?为什么不直接使用cookie ?
本地存储Webview会接忽略http请求header头中的max-age 、 Cache-Control 、cookie等参数,并不会缓存页面。Webview不记录,接收cookie。需要使用localStorage 来记录本地数据。
调试后端与JS接口的调试UI的调试客户端与JS接口的调试                服务器          客户端         HTML5
调试后端与JS接口的调试                  使用PC,用                   chrome,                  safari来模拟             调试  服务器             ...
调试样式的调试           调试  Weinre        实机测试
调试客户端与JS接口的调试                     优先在                   iphone上测              调试   试,相对于  HTML5                   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-bor...
一些细节input type=number在iphone下,长度超过4位会出现”,”导致无法验证是否为整数。 换成input type=phone,这样不会自动转换了
一些细节element.className.indexOf(xx) 在iphone下返回空。      element.className.indexOf(‘xx’) 在iphone下返      回空。这里需要注意一下,与PC上的一些细  ...
谢谢!
Upcoming SlideShare
Loading in...5
×

赶集团购开发总结4

1,175

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "赶集团购开发总结4"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×