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

来源:互联网 发布:p57数据是bin还是dat 编辑:程序博客网 时间:2024/05/16 00:44

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);        }});}




0 0
原创粉丝点击