現(xiàn)在用 hybrid 開發(fā) App 的已經(jīng)是常態(tài)了籍琳，一端兼容三端的方式菲宴，即省開發(fā)時(shí)間又能節(jié)約開支。
-
一般 hybrid 有幾種方式
簡(jiǎn)單的就是使用 JSBridge 的方式趋急，直接在項(xiàng)目中通過bridge來前端來調(diào)用 App 的原生事件裙顽，當(dāng)這些事件是
原生開發(fā)者封裝好的事件, 一個(gè)三端都需要的功能（前提是這個(gè)方式是在前端調(diào)用的），可以通過當(dāng)前的 App 環(huán)境來調(diào)用不同端的方式宣谈，具體實(shí)例我后面會(huì)寫一個(gè) JS 做微信分享的例子愈犹，分享一下。-
直接用現(xiàn)在流行的 hybrid 框架可以直接寫 App闻丑，也可以使用部分使用 hybrid 其它的用原生的寫漩怎。 目前市面上比較流行的 hybrid 框架:
- ReactNative Facebook 出的一個(gè) hybrid 框架，基于 react(jsx) 語法
- weex 阿里出的一個(gè) hybrid 框架嗦嗡，基于 vue 語法
- Flutter 谷歌出的一個(gè) hybrid 框架勋锤，今年勢(shì)頭很好，畢竟還是頂級(jí)大廠的背景侥祭，要學(xué)習(xí)新的語法叁执，目前好像去學(xué)的人很多茄厘，我還在觀望的狀態(tài)。
JSBridge 調(diào)用 IOS
// 連接 IOS bridge
setupWKWebViewJavascriptBridge(callback) {
if (window.WKWebViewJavascriptBridge) { return callback(WKWebViewJavascriptBridge); }
if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }
window.WKWVJBCallbacks = [callback];
window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)
}
hendleClick() {
// 調(diào)用 IOS 方法
this.setupWKWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('IOS方法名', { 傳遞的參數(shù) }, function(response) {
// IOS 端的回調(diào)函數(shù)
})
})
},
}
- JSBridge 調(diào)用 Android
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
connectWebViewJavascriptBridge(function(bridge) {
//初始化
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': 'Wee!'
};
responseCallback(data);
});
})
// 調(diào)用
window.WebViewJavascriptBridge.callHandler(
'App端的事件名'
, {傳遞的參數(shù)} //該類型是任意類型
, function(responseData) {
// App 端的回調(diào)谈宛，可以收到 App 端傳的參數(shù)
}
)
