https://ohpm.openharmony.cn/#/cn/detail/@yue%2Fwebview_javascript_bridge
已有较为详细的方式。
搭桥
app中接入h5之后，网页如果想要和app通信。
1 直接打开app原生某个页；2 设置app权限定位；3 获取客户端实时传给页面的参数、或页面传给客户端就需要用到
2 搭桥方式和ios一致
__bridge_loaded__ 这个域名实际上是一个约定俗成的标识，用于WebViewJavascriptBridge框架中触发桥接初始化的特定行为。在setupWebViewJavascriptBridge函数中，通过创建一个不可见的iframe元素，并将其src属性设置为wvjbscheme://__BRIDGE_LOADED__（或者https://__bridge_loaded__），目的是让WebView加载这个特殊的URL，从而触发原生代码中的桥接初始化流程
仅看js端
// 初始化 WebViewJavascriptBridge
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
// 为什么setTimeout 0见上述
setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
}
// 注册方法，给原生调用 （基本用不到忽略）
setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler('getH5Info', function (data, responseCallback) {
console.log('原生调用 getH5Info 方法传递的参数', JSON.stringify(data))
// JS 返回给原生的数据
var responseData = { 'H5Info': 'xxxxx' }
responseCallback(responseData)
})
})
// JS 调用原生端注册的方法 getNativeInfo是客户端写当如变了则换对应
function testGetNativeInfo() {
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
console.log('JS 获取到原生侧给的数据', response)
})
})
}
webview 识别鸿蒙端next
var u = navigator.userAgent //判断手机类型
u.indexOf('ArkWeb') > -1
u.indexOf('iPhone') > -1
u.indexOf('Android') > -1
补充
如果setupWebViewJavascriptBridge有时无效，可以放在setTimeout例如多少ms延时后
