Más contenido relacionado La actualidad más candente (6) Similar a 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试 (20) Más de Michael Zhang (20) 2014 Hpocon 周辉 大众点评 - 大众点评混合开发模式下的加速尝试4. ⽼老牌Hybrid框架 - PhoneGap
百度百科:
PhoneGap是⼀一个⽤用基于HTML,CSS和JavaScript的,创建移动
跨平台移动应⽤用程序的快速开发平台。它使开发者能够利⽤用
iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能
⼿手机的核⼼心功能——包括地理定位,加速器,联系⼈人,声⾳音和振
动等,此外PhoneGap拥有丰富的插件,可以调⽤用。
8. local repo
mock server
dev tools
package
management
cortex
registry
Git
包管理后台
CI
CDN provider
packages
diff&patch
zip
CDN
app
从后台⾓角度来看,EFTE是这样的:
*Cortex是⼤大众点评的代码依赖管理器
开源地址:https://github.com/cortexjs
16. local repo
mock server
dev tools
package
management
cortex
registry
Git
包管理后台
CI
CDN provider
packages
diff&patch
zip
CDN
app
让我们再来看⼀一下后台架构
下载包
更新请求
*Cortex是⼤大众点评的代码依赖管理器
开源地址:https://github.com/cortexjs
27. ⻚页⾯面⽣生命周期View
launched
html.onload()
efte.onRestoreData()
efte.onAppear()
View
running
efte.onDisappear()
efte.onSaveData()
html.onunload()
View
shut down
WebView
was killed
⻚页⾯面显隐使⽤用:
onAppear()
onDisappear()
保护现场使⽤用:
onRestoreData()
onSaveData()
view navigation
31. ⽼老的研发格局
……
项⺫⽬目组1
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
客户端开发
iOS
客户端开发
Android
前端
开发
项⺫⽬目组2
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
客户端开发
iOS
客户端开发
Android
前端
开发
项⺫⽬目组N
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
客户端开发
iOS
客户端开发
Android
前端
开发
32. 使⽤用EFTE后新的研发格局
……
项⺫⽬目组1
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
客户端开发
iOS
客户端开发
Android
项⺫⽬目组2
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
前端
开发
项⺫⽬目组N
客户端开发
iOS
客户端开发
Android
客户端开发
iOS
前端
开发
客户端开发
Android
前端
开发
前端
开发
前端
开发
客户端开发需求⼤大为减少,前端开发充分利⽤用
客户端开发⼈人员的⼯工作重⼼心发⽣生转移
37. Android的适配中遇到的问题
• url的⻓长度限制(最⻓长2K)
使⽤用分段切割,分段传输数据;
使⽤用静态⽂文件,让native访问⽂文件地址;
• 后台⻚页⾯面可能被杀掉
使⽤用LocalStorage存取数据;
使⽤用数据中⼼心管理未送达的⼲⼴广播消息
• 某些系统版本的Web⻚页⾯面可能间歇性⽆无法点击
⻚页⾯面加载完毕后注⼊入以下代码:
.androidpaintfix {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
}
参⻅见 http://stackoverflow.com/questions/20409632/android-4-3-and-phonegap-cant-tap-link
38. Web开发调试 - iOS
模拟器/真机+Safari直接调试
• iOS需要在设置Safari栏⺫⽬目中打开调试开关
• Safari在[develop]菜单中会出现设备的选项
https://developer.apple.com/safari/
39. Web开发调试 - Android
模拟器/真机+Chrome直接调试
• Android版本要求4.4.2及其以上
https://developer.chrome.com/devtools/docs/
remote-debugging#configure-webview
40. Web开发调试 - Android其他⽅方案
Apache weinre:
http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html
Google Webkit Debug Proxy:
https://github.com/google/ios-webkit-debug-proxy
JSConsole
http://jsconsole.com/