Your SlideShare is downloading. ×
【项目分享】赶集移动Web App开发总结
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

6,400
views

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,400
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
152
Comments
1
Likes
20
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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