开拓创想大牛面对面系列美丽说移动开发混合式

混合式移动App开发

2程序员坚固耐用功能需求：一把椅子产品和运营变化莫测！3哥们儿，能不能瞄准点？！！多么希望...朝令夕改！神马？今天又要吃披萨！又是搞到凌晨的节奏...AndroidiOSHtml5这个需求很简单怎么实现我不管明天上线5变化莫测、朝令夕改、时间紧任务重这可怎么办哪？Html5+Native原生开发7iOS

客户端AppStoreiOS开发团队新功能Android

客户端多个安卓市场Android开发团队新功能微信公众账号网站服务器Web前端开发团队新功能三组开发人员开发周期不统一上线周期时间长混合式开发8Android

客户端iOS客户端新功能微信公众账号网站服务器Web前端开发团队新功能新功能WebView新功能WebView一个顶三个随时上线，无需升级H5这么好，干脆全都用它好了！HTML5原生App大量的页面交互差优硬件调用差优复杂的多页面流程差优动态的内容优中动态的界面优差功能发布时效优差故障修复时效优差什么样的需求适合用H5？需求项适合不适合界面交互页面交互少页面交互多，尤其输入多流程逻辑界面流程简单复杂的弹窗、来回跳转硬件调用少量设备要求大量设备调用加密要求原生的支持不允许暴漏加密算法ActivityA怎样将H5与Native结合？WebViewH5网页ActivityBIntentWebViewH5网页Java方法IntentAndroidAPIScheme桥Scheme原理<ahref=“”>https://rtsp://mailto://smsto://meimiao://打开页面组装Intent网址放在Data字段能处理不能处理Scheme协议Intent：网址：Meimiao://...MainActivityonCreat()onNewIntent()intent.getData().getScheme()WebInternalProtocolParser.getInstance().parse(intent.getDataString(),this);活动订单详情私聊...IntentScheme协议meimiao://{type}.meimiao/?json_params={params}{type}表示要打开页面的类型{params}表示页面的参数，用json编码之后再urlencode一次meimiao://show_detail.meimiao?json_params=%7B%22show_id%22%3A%22123%22%7D{“show_id”:“123”}%7B%22show_id%22%3A%22123%22%7D例如：打开Id为123的商品详情meimiao://open_url.meimiao?json_params=%2F%22%7D{"title":"打开活动","url":""}meimiao://show_detail.meimiao?json_params=%7B%22show_id%22%3A%22123%22%7D解析类型show_detail参数%7B%22show_id%22%3A%22123%22%7DUrlDecode{“show_id”:“123”}创建IntentstartActivity对应ClassShowDetailActivity.classScheme协议总结实现简单，成本低应用场景非常广泛容易与运营结合iOS也可以支持只支持单向调用ActivityA怎样将H5与Native结合？WebViewH5网页ActivityBIntentWebViewH5网页Java方法IntentAndroidAPI桥基于JS-JavaBridge的架构设计20新功能新功能新功能新功能JavaScript前端统一调用接口原生（JSAPI）实现前端（JSAPI）实现原生交互方法WebViewAndroid原生NativeAPI实现原生交互方法UIWebViewiOS原生NativeAPI实现Ajax交互内置浏览器微信H5页面JS

BridgeMeimiao.share(“99174”)Meimiao.login(function(type){alert(“登陆成功！”)})Js调用NativeJs调用NativeNative回调Js

Varid=Meimiao.getDeviceId()单向双向同步双向异步Js调用NativeNative回调JsHTML5与原生交互（C/S模式）ClientServerJavascriptJava优点：适用性广既支持同步方法调用，也支持异步方法调用既使用Android，也适用iOS缺点：连续多次调用接口时，可能会导致超时异常不太推荐使用该方法，除非在接口只偶尔调用的场景HTML5与原生交互（addInterface）mWebView.getSettings().setJavaScriptEnabled(true);mWebView.addJavascriptInterface(newJSInterface(),"jsInterface");危险：通过JavaScript，可以访问当前设备的SD卡上面的任何东西，甚至是联系人信息，短信等现状：4.2以上可以通过@JavascriptInterface注解解决，4.2之下暂时无解，需寻求其他方式强烈建议避免使用addInterface接口HTML5与原生交互（JSPrompt）ClientServerJavascriptJava优点：简单易用，安全性好。既支持同步方法调用，也支持异步方法调用缺点：只适用于Android强烈推荐使用该方法参考实现：HTML5与原生交互（iFrame模式/同）JavascriptObjectCClientServerHTML5与原生交互（iFrame模式/异）JavascriptObjectCClientServer优点：简单易用，安全性好。既支持同步方法调用，也支持异步方法调用缺点：只适用于iOS强烈推荐使用该方法参考实现：Js-Java桥总结主要解决双向通信双向通信支持同步/异步平台（Android、iOS、微信）可用于复杂的混合App实现略复杂，但有可参考的实现27怎样将H5与Native结合总结Scheme协议特点：简单，应用广泛单向（js->java）Js-Java桥特点：略复杂，功能强大类似微信API双向（js->java/java->js）同步调用和异步调用注意问题Cookies将token，渠道号，版本号，应用名等通过WebView存到Cookies“version=1.7.0;;path=/”ProguardNative的方法实现文件是不能混淆的。安全性白名单Cookies增加Httponly

禁止加载本地html文件症状：Web服务器读取cookies时，经常读不到症状：开发时一切正常，Release包上运行有问题。经验HTML5规划中的碎片化程度降低仍然未真正实现；国产/山寨机尤其是篡改过操作系统的手机，适配问题尤其严重；解决思路：更多的适配测试与修复，尽量使用标准的JS，CS