Downloaded 25 times
![js与native的通讯
如何通过一个方法让js可以通用于android和ios？
对这一层的封装可以对以后程序的维
护，扩展，及错误定位起到了积极的作
判断当 用。
前系统
android ios
直接调用window对象 改变hash，通知ios需
内的方法 要调用本地方法
与android和ios定义的接口名称
callNative(methodName,[args1,args2...]);
接口所需要的参数](https://image.slidesharecdn.com/4-111228211359-phpapp01/75/4-17-2048.jpg)
赶集团购开发总结4
- 1. 赶集客户端 ——团购模块开发总结 移动互联网事业部-何知翰
- 2.
- 3.
- 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. 整体架构-加载方式 进入赶集客户端 获取团 不是最新 购模块 的版本 下载最新的页面 号 代码 已是最新 三块缓存 点击进入团购模 页面 块 使用本地缓存加 载页面 请求数据
- 8. 开发过程中遇到的问题 性能问题 上下固定，中间滚动的定位 javascript与native language的通讯 本地存储 测试 细节问题
- 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
- 13. 上下固定，中间滚动的定位 iScroll View拆分 虽然代码逻辑复杂了，但是为了 代码的通用性与可维护性，最终 选择了webview的拆分。
- 14.
- 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...]); 接口所需要的参数
- 18.
- 19. 本地存储 Webview会接忽略http请求header头中的max-age 、 Cache- Control、cookie等参数，并不会缓存页面。 Webview不记录，接收cookie。 需要使用localStorage 来记录本地数据。
- 20. 调试 后端与JS接口的调试 UI的调试 客户端与JS接口的调试 服务器 客户端 HTML5
- 21. 调试 后端与JS接口的调试 使用PC，用 chrome， safari来模拟 调试 服务器 客户端环 境，通过工 具去查看抓 取的请求
- 22. 调试 样式的调试 调试 Weinre 实机测试
- 23. 调试 客户端与JS接口的调试 优先在 iphone上测 调试 试，相对于 HTML5 android的调 试，更透明 清晰
- 24.
- 25. 一些细节 webview中不想点击的时候出现黄框焦点 在需要去掉焦点的节点上加上样式： -webkit-tap-highlight-color:rgba(0,0,0,0);
- 26.
- 27. 一些细节 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;
- 28. 一些细节 input type=number在iphone下，长度超过4 位会出现”,”导致无法验证是否为整数。 换成inputtype=phone，这样不会自动转换了
- 29. 一些细节 element.className.indexOf('xx') 在iphone下 返回空。 element.className.indexOf(‘xx’) 在iphone下返 回空。这里需要注意一下，与PC上的一些细 节区别。
- 30.