vue 与 IOS wkwebview 交互

2,465 阅读1分钟

iOS WKWebView 加载Vue的Html页面(messageHandlers):

  • iOS调用Vue方法

1、Vue的方法给原生调用,则需要把方法挂在window下面:

  created() {
    window.loginOut = this.loginOut
  },
  loginOut(params) {
    this.msg = params
    if (params == 'out') {
        localStorage.removeItem('loginMsg')
    }
    }

2、在iOS中这样调用Vue的方法,如下:

  • vue 调用 IOS
//检测是否登录
    checkLoign() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // vue调用IOS的方法
        this.isLogin()
      } else if (/(Android)/i.test(navigator.userAgent)) { // js调用安卓的方法
        //android
        $App.gotoLogin()
      }
    },
    isLogin() {  // IOS判断是否登录
      var _this = this
      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(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
      }
      setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler('isLogin', function responseCallback(responseData) {
          console.log("JSlogin")
        })
      })
    },

双十一为了弄这个问题奋战到了11点,最后还是找到一篇文章才解决的,跟IOS交互真是复杂。 链上地址 www.jianshu.com/p/2459e6fe0… 还有一个小时我要去买我的游艇了~~~