现在用 hybrid 开发 App 的已经是常态了，一端兼容三端的方式，即省开发时间又能节约开支。
-
一般 hybrid 有几种方式
简单的就是使用 JSBridge 的方式，直接在项目中通过bridge来前端来调用 App 的原生事件，当这些事件是
原生开发者封装好的事件, 一个三端都需要的功能（前提是这个方式是在前端调用的），可以通过当前的 App 环境来调用不同端的方式，具体实例我后面会写一个 JS 做微信分享的例子，分享一下。-
直接用现在流行的 hybrid 框架可以直接写 App，也可以使用部分使用 hybrid 其它的用原生的写。 目前市面上比较流行的 hybrid 框架:
- ReactNative Facebook 出的一个 hybrid 框架，基于 react(jsx) 语法
- weex 阿里出的一个 hybrid 框架，基于 vue 语法
- Flutter 谷歌出的一个 hybrid 框架，今年势头很好，毕竟还是顶级大厂的背景，要学习新的语法，目前好像去学的人很多，我还在观望的状态。
JSBridge 调用 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() {
// 调用 IOS 方法
this.setupWKWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('IOS方法名', { 传递的参数 }, function(response) {
// IOS 端的回调函数
})
})
},
}
- JSBridge 调用 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);
});
})
// 调用
window.WebViewJavascriptBridge.callHandler(
'App端的事件名'
, {传递的参数} //该类型是任意类型
, function(responseData) {
// App 端的回调，可以收到 App 端传的参数
}
)
