原生webview内h5跳转到新的h5页面是否需要新打开webview如何控制两个webview之间的通信?给出阿里、腾讯、美团、百度等大厂的具体jsbridge-sdk解决方案以表格形式列出
| 公司 | 解决方案 | | --- | --- | | 阿里 | AlipayJSBridge | | 腾讯 | WeixinJSBridge | | 美团 | MTJSBridge | | 百度 | BaiduJSBridge |
以上四家公司都提供了相应的JSBridge SDK解决方案,用于实现WebView内的H5页面之间的通信。
在H5页面中,通过调用JSBridge提供的接口,可以向Native发起请求或者接收Native的响应。同时,Native通过JSBridge提供的接口也可以向H5页面中注入JavaScript代码,实现二者之间的通信交互。
以下是各家公司的JSBridge SDK解决方案:
阿里 AlipayJSBridge
阿里提供了AlipayJSBridge,用于实现WebView内的H5页面之间的通信。主要功能包括H5调用Native的API、Native调用H5的API、H5与Native之间的事件通知等。
具体使用方法如下:
- 在H5页面中引入AlipayJSBridge SDK:
<script src="https://appx/web-view.min.js"></script>
- 在H5页面中调用AlipayJSBridge提供的接口:
// H5调用Native的API
AlipayJSBridge.call('apiName', {param: 'value'}, function(result){
// 处理结果
});
// Native调用H5的API
AlipayJSBridge.on('eventName', function(data){
// 处理数据
});
// H5向Native发送事件通知
AlipayJSBridge.emit('eventName', {data: 'value'});
腾讯 WeixinJSBridge
腾讯提供了WeixinJSBridge,用于实现WebView内的H5页面之间的通信。主要功能包括H5调用Native的API、Native调用H5的API、H5与Native之间的事件通知等。
具体使用方法如下:
- 在H5页面中引入WeixinJSBridge SDK:
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
- 在H5页面中调用WeixinJSBridge提供的接口:
// H5调用Native的API
WeixinJSBridge.invoke('apiName', {param: 'value'}, function(result){
// 处理结果
});
// Native调用H5的API
WeixinJSBridge.on('eventName', function(data){
// 处理数据
});
// H5向Native发送事件通知
WeixinJSBridge.invoke('eventName', {data: 'value'});
美团 MTJSBridge
美团提供了MTJSBridge,用于实现WebView内的H5页面之间的通信。主要功能包括H5调用Native的API、Native调用H5的API、H5与Native之间的事件通知等。
具体使用方法如下:
- 在H5页面中引入MTJSBridge SDK:
<script src="https://s0.meituan.net/bs/js/?f=mt-bridge:mt-bridge.js"></script>
- 在H5页面中调用MTJSBridge提供的接口:
// H5调用Native的API
mtBridge.call('apiName', {param: 'value'}, function(result){
// 处理结果
});
// Native调用H5的API
mtBridge.on('eventName', function(data){
// 处理数据
});
// H5向Native发送事件通知
mtBridge.emit('eventName', {data: 'value'});
百度 BaiduJSBridge
百度提供了BaiduJSBridge,用于实现WebView内的H5页面之间的通信。主要功能包括H5调用Native的API、Native调用H5的API、H5与Native之间的事件通知等。
具体使用方法如下:
- 在H5页面中引入BaiduJSBridge SDK:
<script src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.5.js"></script>
- 在H5页面中调用BaiduJSBridge提供的接口:
// H5调用Native的API
swan.call('apiName', {param: 'value'}, function(result){
// 处理结果
});
// Native调用H5的API
swan.on('eventName', function(data){
// 处理数据
});
// H5向Native发送事件通知
swan.emit('eventName', {data: 'value'});
``
原文地址: https://www.cveoy.top/t/topic/eGfy 著作权归作者所有。请勿转载和采集!