【未完待續】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，測試通過之後再更新...