记录一下页面与客户端交互的心酸

1、先介绍一下得力帮手:fiddler4，使用fiddler做代理调试手机页面，设置方法：

      建议连接同一个局域网，即同一个wifi

 一、查看pc端无线网络连接ip,   无线网络连接，无线网络连接，ipv4地址，这里是192.168.*.*

二、设置fildder4

三、设置手机网络代理，

此时fiddler即可监控手机网络请求！

2、利用WebViewJavascriptBridge实现网页也客户端交互，网页引用js即可：

此文件必须放在最顶层页面，如页面包含有iframe，此js文件必须放在iframe所在页面

// 安卓端 function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } // iOS端 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 = 'wvjbscheme://__BRIDGE_LOADED__'; document.documentElement.appendChild(WVJBIframe); setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) } var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) { connectWebViewJavascriptBridge(function(bridge) { //document.getElementById("show").innerHTML = "android WebViewJavascriptBridge inited" }) } else { setupWebViewJavascriptBridge(function(bridge) { //document.getElementById("show").innerHTML = "iOS WebViewJavascriptBridge inited" }) } 之后即可使用以下方法调用客户端方法：

window.WebViewJavascriptBridge.callHandler( 'openTakePhoto' , '9999999' , function(responseData) { document.getElementById("content").contentWindow.photoHandler(responseData); } ); img base64 to blob 

function dataURLtoBlob(dataurl) { var arr = dataurl.split(','); mime = arr[0].match(/:(.*?);/)[1]; bstr = atob(dataurl.substr(22).replace(/\s/g, '')); n = bstr.length; u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } dataurl 包含：data:image/png;base64,

由于是带文件上传用到：new FormData();

function doTest() { var dataHandlerTime = new Date().getTime(); var params = getParams(); if(!params){ return; } var url = $("#url").val(); var data = new FormData(); var dataWithType = new Blob([JSON.stringify(params)], { type: "application/json" }); data.append("data",dataWithType); var img = $("#photos_table_div li").children("img.sel-photo"); if(img){ var imgLength = img.length; for(var i=0;i<imgLength;i++){ var imgSrc = $(img[i]).attr("src"); var blobBin = dataURLtoBlob(imgSrc); var ext = blobBin.type.split("/"); var imgName = new Date().getTime(); data.append('file',blobBin,imgName+"."+ext[1]);//base64不包含文件名，这里设置文件名 } } //data.append('file', $('#testimg').prop('files')[0]) input file 设置方式 $.ajax({ url : url, type : 'post', processData :false, contentType: false, data : data, dataType : 'json', success : function(data){ var obj = eval(data); if(obj.responseCode == '0'){ } }, error: function (jqXHR, textStatus, errorThrown) { alert(textStatus+"---"+errorThrown); } }); }