h5与原生app通讯(WebViewJavascriptBridge)_h5使用webviewjavascriptbridge

h5与原生app通讯

• H5与原生app交互，需要WebViewJavascriptBridge
  转载于此链接

bridge.js

• 01：声明webview与ios、Android的桥梁函数
  • connectWebViewJavascriptBridgeIOS 构建h5与ios的桥梁函数
  • connectWebViewJavascriptBridgeANDROID 构建h5与Android的桥梁函数

• 02：声明h5调用原生的函数(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)
        })
      })
    }

  },

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

main.js挂载

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

使用bridge

• testWebViewBridge是app原始声明的方法，通过$bridge桥梁函数之中的callhandler方法调用原生app的函数
• 其中action是h5需要向原生app传递的参数，可以多个参数
  • this.$bridge.callhandler('testWebViewBridge', { param1:param1,param2:param2 }, data => { console.log(data ) })
• data 则为原生app返回给h5的函数(里面包含当前调用的状态与结果)

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;
    });
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27