鸿蒙next webview搭桥

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延时后