開拓創(chuàng)想大牛面對面系列美麗說移動開發(fā)混合式

混合式移動App開發(fā)

2程序員堅固耐用功能需求：一把椅子產(chǎn)品和運營變化莫測！3哥們兒，能不能瞄準(zhǔn)點？?。《嗝聪Ｍ?..朝令夕改！神馬？今天又要吃披薩！又是搞到凌晨的節(jié)奏...AndroidiOSHtml5這個需求很簡單怎么實現(xiàn)我不管明天上線5變化莫測、朝令夕改、時間緊任務(wù)重這可怎么辦哪？Html5+Native原生開發(fā)7iOS

客戶端AppStoreiOS開發(fā)團(tuán)隊新功能Android

客戶端多個安卓市場Android開發(fā)團(tuán)隊新功能微信公眾賬號網(wǎng)站服務(wù)器Web前端開發(fā)團(tuán)隊新功能三組開發(fā)人員開發(fā)周期不統(tǒng)一上線周期時間長混合式開發(fā)8Android

客戶端iOS客戶端新功能微信公眾賬號網(wǎng)站服務(wù)器Web前端開發(fā)團(tuán)隊新功能新功能WebView新功能WebView一個頂三個隨時上線，無需升級H5這么好，干脆全都用它好了！HTML5原生App大量的頁面交互差優(yōu)硬件調(diào)用差優(yōu)復(fù)雜的多頁面流程差優(yōu)動態(tài)的內(nèi)容優(yōu)中動態(tài)的界面優(yōu)差功能發(fā)布時效優(yōu)差故障修復(fù)時效優(yōu)差什么樣的需求適合用H5？需求項適合不適合界面交互頁面交互少頁面交互多，尤其輸入多流程邏輯界面流程簡單復(fù)雜的彈窗、來回跳轉(zhuǎn)硬件調(diào)用少量設(shè)備要求大量設(shè)備調(diào)用加密要求原生的支持不允許暴漏加密算法ActivityA怎樣將H5與Native結(jié)合？WebViewH5網(wǎng)頁ActivityBIntentWebViewH5網(wǎng)頁Java方法IntentAndroidAPIScheme橋Scheme原理<ahref=“”>https://rtsp://mailto://smsto://meimiao://打開頁面組裝Intent網(wǎng)址放在Data字段能處理不能處理Scheme協(xié)議Intent：網(wǎng)址：Meimiao://...MainActivityonCreat()onNewIntent()intent.getData().getScheme()WebInternalProtocolParser.getInstance().parse(intent.getDataString(),this);活動訂單詳情私聊...IntentScheme協(xié)議meimiao://{type}.meimiao/?json_params={params}{type}表示要打開頁面的類型{params}表示頁面的參數(shù)，用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參數(shù)%7B%22show_id%22%3A%22123%22%7DUrlDecode{“show_id”:“123”}創(chuàng)建IntentstartActivity對應(yīng)ClassShowDetailActivity.classScheme協(xié)議總結(jié)實現(xiàn)簡單，成本低應(yīng)用場景非常廣泛容易與運營結(jié)合iOS也可以支持只支持單向調(diào)用ActivityA怎樣將H5與Native結(jié)合？WebViewH5網(wǎng)頁ActivityBIntentWebViewH5網(wǎng)頁Java方法IntentAndroidAPI橋基于JS-JavaBridge的架構(gòu)設(shè)計20新功能新功能新功能新功能JavaScript前端統(tǒng)一調(diào)用接口原生（JSAPI）實現(xiàn)前端（JSAPI）實現(xiàn)原生交互方法WebViewAndroid原生NativeAPI實現(xiàn)原生交互方法UIWebViewiOS原生NativeAPI實現(xiàn)Ajax交互內(nèi)置瀏覽器微信H5頁面JS

BridgeMeimiao.share(“99174”)Meimiao.login(function(type){alert(“登陸成功！”)})Js調(diào)用NativeJs調(diào)用NativeNative回調(diào)Js

Varid=Meimiao.getDeviceId()單向雙向同步雙向異步Js調(diào)用NativeNative回調(diào)JsHTML5與原生交互（C/S模式）ClientServerJavascriptJava優(yōu)點：適用性廣既支持同步方法調(diào)用，也支持異步方法調(diào)用既使用Android，也適用iOS缺點：連續(xù)多次調(diào)用接口時，可能會導(dǎo)致超時異常不太推薦使用該方法，除非在接口只偶爾調(diào)用的場景HTML5與原生交互（addInterface）mWebView.getSettings().setJavaScriptEnabled(true);mWebView.addJavascriptInterface(newJSInterface(),"jsInterface");危險：通過JavaScript，可以訪問當(dāng)前設(shè)備的SD卡上面的任何東西，甚至是聯(lián)系人信息，短信等現(xiàn)狀：4.2以上可以通過@JavascriptInterface注解解決，4.2之下暫時無解，需尋求其他方式強烈建議避免使用addInterface接口HTML5與原生交互（JSPrompt）ClientServerJavascriptJava優(yōu)點：簡單易用，安全性好。既支持同步方法調(diào)用，也支持異步方法調(diào)用缺點：只適用于Android強烈推薦使用該方法參考實現(xiàn)：HTML5與原生交互（iFrame模式/同）JavascriptObjectCClientServerHTML5與原生交互（iFrame模式/異）JavascriptObjectCClientServer優(yōu)點：簡單易用，安全性好。既支持同步方法調(diào)用，也支持異步方法調(diào)用缺點：只適用于iOS強烈推薦使用該方法參考實現(xiàn)：Js-Java橋總結(jié)主要解決雙向通信雙向通信支持同步/異步平臺（Android、iOS、微信）可用于復(fù)雜的混合App實現(xiàn)略復(fù)雜，但有可參考的實現(xiàn)27怎樣將H5與Native結(jié)合總結(jié)Scheme協(xié)議特點：簡單，應(yīng)用廣泛單向（js->java）Js-Java橋特點：略復(fù)雜，功能強大類似微信API雙向（js->java/java->js）同步調(diào)用和異步調(diào)用注意問題Cookies將token，渠道號，版本號，應(yīng)用名等通過WebView存到Cookies“version=1.7.0;;path=/”ProguardNative的方法實現(xiàn)文件是不能混淆的。安全性白名單Cookies增加Httponly

禁止加載本地html文件癥狀：Web服務(wù)器讀取cookies時，經(jīng)常讀不到癥狀：開發(fā)時一切正常，Release包上運行有問題。經(jīng)驗HTML5規(guī)劃中的碎片化程度降低仍然未真正實現(xiàn)；國產(chǎn)/山寨機(jī)尤其是篡改過操作系統(tǒng)的手機(jī)，適配問題尤其嚴(yán)重；解決思路：更多的適配測試與修復(fù)，盡量使用標(biāo)準(zhǔn)的JS，CS