【未完待续】h5 和 Android & IOS交互

在开发h5项目的时候，使用到了个人中心上传头像的功能，由于使用原生的调用手机相册相机的功能

<input type="file" id='image' accept="image/*" capture='camera' name="file">
<input type="file" name="file" style="margin-top:20px;">

android和ios页面不统一，故需要借助android和ios原生开发，这时就要web和移动端交互。具体UI如下：

这个弹框需要android和ios原生画出来，这时需要web和移动端进行交互。

【web和android交互】

1）先判断当前使用的机型：

 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苹果

2）如果是android，则调用androidInteractive();

/**
 * ************android交互*******
 */
//android会向window注册一个接口helper，helper这个类中会有一个clickHeadImage方法
//web可以通过window.helper.clickHeadImage这种方式直接向android传递所需要的参数 token
function androidInteractive() {
  let token = utils.getCookie("userToken");
  if (window.helper && window.helper.clickHeadImage) {
    let message = window.helper.clickHeadImage(token);
    document.getElementById("printInfo").innerHTML = message;
  } else {
    //如果没有这个helper接口或者没有clickHeadImage这个方法，则可以使用input自行调用相机&相册
  }
}
//android端将图片上传到服务器之后需要把URL回显给web
//此时android需要调用web提供的方法（带参）返回给web
//web提供的方法必须是挂载在window上的
window.webInteractive = function webInteractive(url) {
  if (url) document.getElementById("portrait").setAttribute("src", url);
  return url;
};

【web和 ios 交互】

此处需要桥梁bridge，测试通过之后再更新...