JS和Android互调（调用相机拍照）_js调用手机相机兼容ios和安卓

Android用的是jsbridge.BridgeWebView。github链接：https://github.com/lzyzsd/JsBridge

js封装了一下方法（参考：JSbridge 在Vue的封装与交互）：

let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

//执行回调函数 这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
  //Android使用
  if (isAndroid) {
    //如果该对象已存在则直接执行
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge);
    } else {
      //否则添加事件监听再执行
      document.addEventListener(
        'WebViewJavascriptBridgeReady',
        () => {
          callback(window.WebViewJavascriptBridge);
        },
        false
      );
    }
    console.log('tag，android');
    sessionStorage.phoneType = 'android';
  }

  //iOS使用
  if (isiOS) {
    if (window.WebViewJavascriptBridge) {
      return callback(window.WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
      return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(() => {
      document.documentElement.removeChild(WVJBIframe);
    }, 0);
    console.log('tag', 'ios');
    sessionStorage.phoneType = 'ios';
  }
}

//注册回调函数，第一次连接时调用(进入H5页面) 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge((bridge) => {
  console.log('tag，setupWebViewJavascriptBridge');
  if (isAndroid) {
    //初始化 一个无参数的handler供Android调用
    bridge.init((message, responseCallback) => {
      console.log('JS got a message', message);
      var data = {
        'Javascript Responds': 'Wee!'
      };
      responseCallback(data);
    });
  }
});

export default {
  // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
  callHandler(name, data, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.callHandler(name, data, callback);
    });
  },
  // APP调js方法 （参数分别为:js提供的方法名  回调）
  registerHandler(name, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.registerHandler(name, (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
78