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. 谢谢！