Web App 开发总结  何知翰(zhihanhe@gmail.com)  http://code.google.com/p/sinaeditor/
技术结构技术选型整体架构开发中遇到的问题
技术结构涉及的部门:业务部门提供后端的数据。移动后台组封装数据,提供给客户端。客户端展示数据。(客户端分为ios和android)
技术选型选择html5的原因:1.减少沟通成本。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
×

【项目分享】赶集移动Web App开发总结

6,534

Published on

Published in: Technology
1 Comment
20 Likes
Statistics
Notes
  • 非常感谢提供 小弟学习了
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,534
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
154
Comments
1
Likes
20
Embeds 0
No embeds

No notes for slide

【项目分享】赶集移动Web App开发总结

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

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×