H5与原生APP(androidios)是如何交互的

场景描述：公司分别用Android和iOS开发的APP，嵌入同一个H5页面，需要做H5和APP之间的交互；APP通知H5可以通过URL链接传参的方式告知，但H5要通知APP呢，我们想到的是JS交互。

一、封装each.js并存放到common目录下

// 判断设备是android还是ios
export function getDevice() {
  // 判断H5页面环境是否在小程序的webview中 web-view会检测each.js中的https://__bridge_loaded__域名而报错
  if(/MicroMessenger/i.test(navigator.userAgent)) {
    // ios的ua中无miniProgram，很坑爹，但都有MicroMessenger（表示是微信浏览器）
    wx.miniProgram.getEnv((res)=>{
      if (res.miniprogram) {
        console.log("在小程序里");
      }
    })
  }else{
    console.log("不在小程序里");
    var u = navigator.userAgent;
    //android终端
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    //ios终端
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    // 设备
    var device = {};
    if (isAndroid) {
      device.type = "Android";
      device.method = AndroidMethod();
    } else if (isIOS) {
      device.type = "IOS";
      device.method = IOSMethod();
    } else {
      device.type = "Unknown Device";
    }
    return device;
  }
}

// 安卓方法
function AndroidMethod() {
  var method = {};
  // 跳转
  method.jumpTo = function (tag, url) {
    window.android.jumpTo(tag, url);
  };
  // 保存登录信息
  method.setLoginData = function (str) {
    window.android.setLoginData(str);
  };
  // 获取登录信息
  method.getLoginData = function (callBack) {
    var response = JSON.parse(window.android.getLoginData());
    callBack(response.userinfo);
  };
  // 获取流量统计
  method.getFlowStatistics = function (callBack) {
    var response = JSON.parse(window.android.getFlowStatistics());
    callBack(response);
  };
  // 获取token
  method.getToken = function () {
    window.android.getToken();
  };
  // 保存数据
  method.saveData = function (title, str) {
    window.android.saveData(title, JSON.stringify(str));
  };
  // 获取数据
  method.getData = function (title, callBack) {
    var response = window.android.getData(title);
    callBack(JSON.parse(response));
  };
  // 获取登录信息及代金券ID
  method.getLoginAndVochId = function (voucherEntranceData, callBack) {
    if (voucherEntranceData.entrance == 'app') {
      var response = JSON.parse(window.android.getLoginAndVochId());
      callBack(response);
    } else {
      var response = JSON.parse(window.android.getLoginData());
      response.voucher_id = voucherEntranceData.voucher_id;
      callBack(response);
    }
  };
  return method;
}

// 苹果方法
function IOSMethod() {
  var method = {};
  // 跳转
  method.jumpTo = function (tag, url) {
    var o = {
      'tag': tag,
      'url': url
    };
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('jumpTo', o, function (response) {})
    });
  };
  // 保存登录信息
  method.setLoginData = function (str) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('setLoginData', str, function (response) {})
    });
  };
  // 获取登录信息
  method.getLoginData = function (callBack) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('getLoginData', function (response) {
        var responseObj = JSON.parse(response);
        callBack(responseObj.userinfo);
      })
    });
  };
  // 保存数据
  method.saveData = function (title, content) {
    var data = {
      'title': title,
      'content': content
    };
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('saveData', data, function (response) {})
    });
  };
  // 获取数据
  method.getData = function (title, callBack) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('getData', title, function (response) {
        callBack(response);
      })
    });
  };
  // 立即开始
  method.startnow = function (member_id, redId, taskType, taskId, termType, term, url) {
    var data = {
      'member_id': member_id,
      'redId': redId,
      "taskType": taskType,
      "taskId": taskId,
      "termType": termType,
      "term": term,
      "url": url,
    };
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('startnow', data, function (response) {})
    });
  };
  // 第二个按钮动作
  method.nextact = function (member_id, redId, taskType) {
    var data = {
      'member_id': member_id,
      'redId': redId,
      "taskType": taskType
    };
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('nextact', data, function (response) {})
    });
  };
  setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('showButton', function (response) {
      showButton();
    })
  });
  setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('showOverTimeButton', function (response) {
      showOverTimeButton(response)
    })
  });
  // 获取流量统计
  method.getFlowStatistics = function (callBack) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler('getFlowStatistics', function (response) {
        var responseObj = JSON.parse(response);
        callBack(responseObj);
      })
    });
  };
  // 获取登录信息及代金券ID
  method.getLoginAndVochId = function (voucherEntranceData, callBack) {
    if (voucherEntranceData.entrance == 'app') {
      setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler('getLoginAndVochId', function (response) {
          var responseObj = JSON.parse(response);
          callBack(responseObj);
        })
      });
    } else {
      setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler('getLoginData', function (response) {
          var responseObj = JSON.parse(response);
          responseObj.voucher_id = voucherEntranceData.voucher_id;
          callBack(responseObj);
        })
      });
    }
  };
  /* 申明交互 */
  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)
  }
  return method;
}

二、在main.js主入口中引入并抛出全局变量

import {getDevice} from './common/each.js'
Vue.prototype.getDevice = getDevice;

三、在需要通知APP的地方调用saveData方法

this.getDevice().method.saveData(title,value);    // 往app传入数据

weixin@zdkeep免费获取各种学习资料面试题及电子书籍，免费进群学习成长技术交流职位内推项目外包等。