最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】ReactJS的H5利用WebViewJavascriptBridge和iOS的app互相调用

app crifan 8408浏览 0评论

之前已经实现了基本的H5和原生(iOS和Android的)互相调用了:

【已解决】ReactJS的JS的H5中如何回调原生的iOS和Android的app

但是iOS是使用的旧的webview

性能比较低,页面点击起来不流畅,有点卡顿的感觉。而且各种web控件感觉兼容性也有问题

比如点击保存后,页面时不时的没有消失掉

现在希望换用性能比较好的WKWebView

参考:

WebViewJavascriptBridge详细使用 – 姜晓延 – 博客园

marcuswestin/WebViewJavascriptBridge: An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews

去写ReactJS的JS代码

去尝试写代码:

export default class Header extends Component {
。。。
  constructor(props) {
    this.setupWebViewJavascriptBridge = this.setupWebViewJavascriptBridge.bind(this);
}
  componentWillMount() {
    this.setupWebViewJavascriptBridge( (bridge) => {
      alert(“setupWebViewJavascriptBridge”);
      bridge.registerHandler(‘scanDeviceCodeCallbackiOS’, (data, responseCallback) => {
        alert(‘iOS called scanDeviceCodeCallbackiOS with’, data);
        let responseData = { ‘Javascript Says’:’Right back atcha!’ };
        alert(‘JS responding with’, responseData);
        responseCallback(responseData);
      });
      bridge.callHandler(‘scanDeviceCodeiOS’, {‘paramKey’: ‘paramValue’}, (response) => {
        alert(‘JS got response’, response);
      });
    });
  }
  setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    let WVJBIframe = document.createElement(‘iframe’);
    WVJBIframe.style.display = ‘none’;
    WVJBIframe.src = ‘https://__bridge_loaded__’;
    // WVJBIframe.src = ‘wvjbscheme://__BRIDGE_LOADED__’;
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(() => { document.documentElement.removeChild(WVJBIframe);}, 0);
  }
}

结果提示:

[eslint] ‘WebViewJavascriptBridge’ is not defined. (no-undef)

搜:

WebViewJavascriptBridge  is not defined

Is there a way to intergrate WebViewJavascriptBridge with Angularjs or Ionic framework? · Issue #90 · marcuswestin/WebViewJavascriptBridge

In the Javascript bridge, when there is no handler with the called handler name, provide a better error message. · Issue #120 · marcuswestin/WebViewJavascriptBridge

【求助】JS问题Uncaught ReferenceError:XXXX is not defined – CNode技术社区

继续参考:

js与native交互之JsBridge – 简书

WebViewJavascriptBridge js

看到了:

WebViewJavascriptBridge 原理解析 – iOS – 掘金

说是:

function setupWebViewJavascriptBridge(callback) {
     //第一次调用这个方法的时候,为false
    if (window.WebViewJavascriptBridge) {
        var result = callback(WebViewJavascriptBridge);
        return result;
    }
    //第一次调用的时候,也是false
    if (window.WVJBCallbacks) {
        var result = window.WVJBCallbacks.push(callback);
        return result;
    }
    //把callback对象赋值给对象。
    window.WVJBCallbacks = [callback];
    //这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用
    var WVJBIframe = document.createElement(‘iframe’);
    WVJBIframe.style.display = ‘none’;
    WVJBIframe.src = ‘https://__bridge_loaded__’;
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() {
        document.documentElement.removeChild(WVJBIframe)
    }, 0);
}

所以感觉是:

此处setupWebViewJavascriptBridge的代码就是应该写成:

if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }

而不是自己猜测的:

if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge); }

所以还是改回:

Android 和 IOS 使用 WebViewJavascriptBridge 进行交互方法 – 简书

现在写代码去调试,折腾了半天,貌似是:

(1)WKWebView中,JS中的alert不起效果?

【已解决】iOS的APP中WKWebView中alert弹框不显示

【总结】

最终是基本跑通了互相调用

ReactJS中H5的JS代码 和 iOS的代码,详见:

【已解决】ReactJS的JS的H5中如何回调原生的iOS和Android的app

和:

【整理Book】移动端APP开发总结

转载请注明:在路上 » 【记录】ReactJS的H5利用WebViewJavascriptBridge和iOS的app互相调用

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.191 seconds, using 22.20MB memory