首页 > 程序开发 > web前端 > HTML/CSS >

页面客户端交互

2017-03-18

页面客户端交互:先介绍一下得力帮手:fiddler4,使用fiddler做代理调试手机页面,设置方法:建议连接同一个局域网,即同一个wifi。

页面客户端交互:先介绍一下得力帮手: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 sentComment(){
		var url = $("#albumItemCommentURL").val();
		var params = {"mediaType":3};
		var data = new FormData();
		var audioBase64Data = $("#audioBase64Data").attr("src");
		if(audioBase64Data){
			var blobBin = dataURLtoBlob(audioBase64Data);
		    var fileType = blobBin.type.split("/")[1];
		    params.fileType = fileType;
		    data.append('file',blobBin);
		}
	    var dataWithType = new Blob([JSON.stringify(params)],{
		    type: "application/json"
		});
		data.append("data",dataWithType);
		$.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);
	        }
		});
	}

相关文章
最新文章
热点推荐