移动端与原生APP的交互 WebViewJavascriptBridge

首先定一个公共的方法

/*这段代码是固定的，必须要放到js中*/
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var isWeixin = u.toLowerCase().indexOf('micromessenger') != -1; //微信浏览器打开
function setupWebViewJavascriptBridge(callback) {
  if(isiOS){//ios的处理
    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 = 'wvjbscheme://__BRIDGE_LOADED__';
	document.documentElement.appendChild(WVJBIframe);
	setTimeout(function() {
	  document.documentElement.removeChild(WVJBIframe)
	}, 0)
  }
  if(isAndroid){//Android的处理
    if (window.WebViewJavascriptBridge) {
	  callback(WebViewJavascriptBridge)
	} else {
	  document.addEventListener(
	    'WebViewJavascriptBridgeReady'
		, function() {
		  callback(WebViewJavascriptBridge)
		},
		false
	  );
	}
  }
}

页面调用

/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) {
  if(isAndroid) {//需要加此代码解决Android没效果
    bridge.init(function(message, responseCallback) {
      console.log('JS got a message', message);
      var datas = {
        'Javascript Responds': '测试中文!'
      };
      console.log('JS responding with', datas);
      responseCallback(datas);
    });
  }
  var uniqueId = 1
  /*此处为调试时界面的输出 start*/
  function log(message, data) {
    var log = document.getElementById('log')
    var el = document.createElement('div')
    el.className = 'logLine'
    el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
    if(log.children.length) {
      log.insertBefore(el, log.children[0])
    } else {
      log.appendChild(el)
    }
  }
  /*此处为调试时界面的输出 end*/

  /*我们在这注册一个js的方法，用于APP调用前端方法*/
  bridge.registerHandler('addSignUser', function(datas, responseCallback) {
    //注：addSignUser为方法名;datas用于接收APP传给前端的参数,responseCallback用于APP调用前端方法的回调
    var data = datas;
    responseCallback({
      status: true,
      message: '调用成功'
    })
  })

  /*用于前端调用APP的方法*/
  bridge.callHandler('getUserInfo','{userid:1111}', function(responseData) {
    //注：getUserInfo为方法名;第二个''中为传给APP的参数;responseData接收APP传给前端的参数
  })
  
})