More Related Content
Similar to 赶集团购开发总结4 (20)
赶集团购开发总结4
- 5. 技术选型
选择html5的原因:
1.减少沟通成本。
由原来的4个部门合作改成团购部门和web移动开发组进行合作。客户
端只是提供入口即可。
2.版本的快速迭代。
不随着客户端的上线而上线,随时可以上线新的版本。
3.跨平台。
一个版本对应两个客户端,节省了开发周期。
- 6. 整体架构
Native language
HTML5 CSS3
JAVASCRIPT
后端接口
Native
language(java
Object c)
接口数据
基于WEB的app
HTML5,
CSS3,JS
- 7. 整体架构-加载方式
进入赶集客户端
获取团
不是最新 购模块
的版本
下载最新的页面 号
代码
已是最新 三块缓存
点击进入团购模
页面
块
使用本地缓存加
载页面
请求数据
- 9. 性能问题
滚动事 对
件的简 android
体以实 取消点
现点击 击态
态
下 下
拉 优化方案: 拉
滚 1.减少显示条数。 滚
动 2.去除消耗性能的 动
不 js滚动监听 不
流 畅
畅
320条数据 最多显示20条数据
- 10. 上下固定,中间滚动的定位
固定
position: fixed;用于实现元素固定在页
可
下 面某处的一种样式。在ios5和android
拉 4以下不被支持。固定菜单面板这样
滑
动 的样式单纯使用css不能达到要求。
固定
- 11. 上下固定,中间滚动的定位
方案一:iScroll
iScroll
使用JS+CSS3来实现头尾固定的效果。JS负责监听手
指对屏幕的操作(touchstart,touchmove,touchend),
控制css3中的transform来实现页面上元素的滚动
的。
优点:
代码变得清晰简单。
可以实现下拉刷新等功能。
减少对客户端的依赖性。
缺点:
在android下不能使用,与原生实现的滚动性能相
差太大。
- 12. 上下固定,中间滚动的定位
方案二:拆分成三段
webview
把页面拆分成三个部分,上中
下。中间超出的长度自然就有了
滚动条。
缺点:
更加依赖于客户端。
结构被限制在上中下三个区域。
跨页面间的JS调用也提升了代码
的复杂性。
webview
优点:
性能得到提升。
可以跨平台使用。
webview
- 15. js与native的通讯
Android与js
WebView
客户端新 Webview.
loadUrl(“javascri
webkit pt:ganji.foo()")
native
增接口
javascript
ganji(namespace
window documnet
)
- 16. js与native的通讯
iPhone与js
UIWebView
监听URL evaluateWebScri
pt:@”ganji.foo();
webkit ”
native
的改变
javascript
#showLoading #showMap 改变URL的
hash
- 17. js与native的通讯
如何通过一个方法让js可以通用于android和ios?
对这一层的封装可以对以后程序的维
护,扩展,及错误定位起到了积极的作
判断当 用。
前系统
android ios
直接调用window对象 改变hash,通知ios需
内的方法 要调用本地方法
与android和ios定义的接口名称
callNative(methodName,[args1,args2...]);
接口所需要的参数
- 21. 调试
后端与JS接口的调试
使用PC,用
chrome,
safari来模拟
调试
服务器 客户端环
境,通过工
具去查看抓
取的请求