Communication between h5 and native app (WebViewJavascriptBridge)

h5 communicates with native app

• H5 interacts with native apps, WebViewJavascriptBridge is required
  Reprinted from this link

bridge.js

• 01: Declare the bridge function between webview and ios and Android
  • connectWebViewJavascriptBridgeIOS builds a bridge function between h5 and ios
  • connectWebViewJavascriptBridgeANDROID builds a bridge function between h5 and Android

• 02: Declare that h5 calls the native function (callhandler)

//iOS 交互声明
function connectWebViewJavascriptBridgeIOS(callback) {
    
    
  if (window.WebViewJavascriptBridge) {
    
    
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    
    
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback] // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
  let WVJBIframe = document.createElement('iframe') // 创建一个 iframe 元素
  WVJBIframe.style.display = 'none'  // 不显示
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__' // 设置 iframe 的 src 属性
  document.documentElement.appendChild(WVJBIframe) // 把 iframe 添加到当前文导航上。
  setTimeout(() => {
    
    
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}


//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {
    
    
  if (window.WebViewJavascriptBridge) {
    
    
    callback(WebViewJavascriptBridge);
  } else {
    
    
    document.addEventListener(
      "WebViewJavascriptBridgeReady",
      function () {
    
    
        callback(WebViewJavascriptBridge);
      },
      false
    );
  }
}

export default {
    
    
  //H5调用Native
  callhandler(name, data, callback) {
    
    
    //iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    
    
      connectWebViewJavascriptBridgeIOS(function (bridge) {
    
    
        bridge.callHandler(name, data, callback)
      })
    }
    //Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
    
    
      connectWebViewJavascriptBridgeANDROID(function (bridge) {
    
    
        bridge.callHandler(name, data, callback)
      })
    }
  },
  //Native调用H5
  registerhandler(name, callback) {
    
    
    //iOS的方法
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    
    
      connectWebViewJavascriptBridgeIOS(function (bridge) {
    
    
        bridge.registerHandler(name, function (data, responseCallback) {
    
    
          callback(data, responseCallback)
        })
      })
    }
    //Android方法
    if (/(Android)/i.test(navigator.userAgent)) {
    
    
      connectWebViewJavascriptBridgeANDROID(function (bridge) {
    
    
        bridge.init(function (message, responseCallback) {
    
    
          if (responseCallback) {
    
    
            // responseCallback(data);
          }
        });
        bridge.registerHandler(name, function (data, responseCallback) {
    
    
          callback(data, responseCallback)
        })
      })
    }

  },

}

main.js mount

import Bridge from "@/config/bridge.js" //此路径根据实际bridge.js路径填写
Vue.prototype.$bridge = Bridge

use bridge

• testWebViewBridgeIt is the method originally declared by the app, and the function of the original app is called through the callhandler method in the bridge function of $bridge
• Among them, action is the parameter that h5 needs to pass to the native app, and multiple parameters can be used
  • this.$bridge.callhandler('testWebViewBridge', { param1:param1,param2:param2 }, data => { console.log(data ) })
• data is the function returned by the native app to h5 (which contains the status and results of the current call)

methods: {
    
    
    goNative() {
    
    
      const that= this;
      // h5 调用原生app的 testWebViewBridge方法
      this.$bridge.callhandler(
        "testWebViewBridge",
        {
    
     action: "pick me" },
        data => {
    
    
          that.ddd = data;
          // 处理返回数据
        }
      );
    },
    // h5注册方法，供app调用
    iosToH5(){
    
    
	 },
  },

  mounted() {
    
    
    // 原生app调用h5方法，iosToH5是methods中定义的方法名。
    const that= this;
    this.$bridge.registerhandler("iosToH5", (data, responseCallback) => {
    
    
      // data是原生app传递给h5的参数
      that.native_data = data;
    });
  }