通过javascirptBridge与手机端进行交互

<div>
<p>案例：</p>


<div><button id='QRCodeButton' style="font-size:12px">二维码扫描</button><span><a class="codeContent" style="margin-left:20px;" href="javascript:;" rel="showQRCode">查看源码</a></span></div>
<div style="margin-top:20px;"><button id='selectPButton' style="font-size:12px">选人</button><span><a class="codeContent" style="margin-left:20px;" href="javascript:;" rel="showSelectPerson">查看源码</a></span></div>
<div style="margin-top:20px;"><button id='cameraButton' style="font-size:12px">手机相机</button><span><a class="codeContent" style="margin-left:20px;" href="javascript:;" rel="showCamera">查看源码</a></span></div>
<div style="margin-top:20px;"><button id='albumSelectButton' style="font-size:12px">本地相册选图片</button><span><a class="codeContent" style="margin-left:20px;" href="javascript:;" rel="showAlbumSelect">查看源码</a></span></div>
<div style="margin-top:20px;"><button id='albumPreviewButton' style="font-size:12px">多图相册效果</button><span><a class="codeContent" style="margin-left:20px;" href="javascript:;" rel="showAlbumPreview">查看源码</a></span></div>
<div style="margin-top:20px;">
	<div id="showQRCode" style="display:none;">
		<br>JS代码如下：
		<br>function connectWebViewJavascriptBridge(callback) {
		<br>if (window.WebViewJavascriptBridge) {
		<br>callback(WebViewJavascriptBridge)
		<br>} else {
		<br>document.addEventListener('WebViewJavascriptBridgeReady', function() {
		<br>callback(WebViewJavascriptBridge)
		<br}, false)
		<br>}
		<br>}
		<br>connectWebViewJavascriptBridge(function(bridge) {
		<br>bridge.init(function(message, responseCallback) {
		<br>var data = { 'Javascript Responds':'Wee!' }
		<br>responseCallback(data)
		<br>})
		<br>$("#QRCodeButton").click( function(e) {
		<br>e.preventDefault()
		<br>bridge.callHandler('onQRCodeScan', {}, function(result) {
		<br>alert(result);
		<br>})
		<br>});
	</div>
	<div id="showSelectPerson" style="display:none;">
		<br>JS代码如下：
		<br>function connectWebViewJavascriptBridge(callback) {
		<br>if (window.WebViewJavascriptBridge) {
		<br>callback(WebViewJavascriptBridge)
		<br>} else {
		<br>document.addEventListener('WebViewJavascriptBridgeReady', function() {
		<br>callback(WebViewJavascriptBridge)
		<br}, false)
		<br>}
		<br>}
		<br>connectWebViewJavascriptBridge(function(bridge) {
		<br>bridge.init(function(message, responseCallback) {
		<br>var data = { 'Javascript Responds':'Wee!' }
		<br>responseCallback(data)
		<br>})
		<br>$("#selectPButton").click( function(e) {
		<br>e.preventDefault()
		<br>bridge.callHandler('onPplSelect', {}, function(result) {
		<br>alert(result);
		<br>})
		<br>});
	</div>
	<div id="showCamera" style="display:none;">
		<br>JS代码如下：
		<br>function connectWebViewJavascriptBridge(callback) {
		<br>if (window.WebViewJavascriptBridge) {
		<br>callback(WebViewJavascriptBridge)
		<br>} else {
		<br>document.addEventListener('WebViewJavascriptBridgeReady', function() {
		<br>callback(WebViewJavascriptBridge)
		<br}, false)
		<br>}
		<br>}
		<br>connectWebViewJavascriptBridge(function(bridge) {
		<br>bridge.init(function(message, responseCallback) {
		<br>var data = { 'Javascript Responds':'Wee!' }
		<br>responseCallback(data)
		<br>})
		<br>$("#cameraButton").click( function(e) {
		<br>e.preventDefault()
		<br>bridge.callHandler('onPicTake', {}, function(result) {
		<br>alert(result);
		<br>})
		<br>});
	</div>
	<div id="showAlbumSelect" style="display:none;">
		<br>JS代码如下：
		<br>function connectWebViewJavascriptBridge(callback) {
		<br>if (window.WebViewJavascriptBridge) {
		<br>callback(WebViewJavascriptBridge)
		<br>} else {
		<br>document.addEventListener('WebViewJavascriptBridgeReady', function() {
		<br>callback(WebViewJavascriptBridge)
		<br}, false)
		<br>}
		<br>}
		<br>connectWebViewJavascriptBridge(function(bridge) {
		<br>bridge.init(function(message, responseCallback) {
		<br>var data = { 'Javascript Responds':'Wee!' }
		<br>responseCallback(data)
		<br>})
		<br>$("#albumSelectButton").click( function(e) {
		<br>e.preventDefault()
		<br>ridge.callHandler('onAlbumSelect', {}, function(result) {
		<br>alert(result);
		<br>})
		<br>});
	</div>
	<div id="showAlbumPreview" style="display:none;">
		<br>JS代码如下：
		<br>function connectWebViewJavascriptBridge(callback) {
		<br>if (window.WebViewJavascriptBridge) {
		<br>callback(WebViewJavascriptBridge)
		<br>} else {
		<br>document.addEventListener('WebViewJavascriptBridgeReady', function() {
		<br>callback(WebViewJavascriptBridge)
		<br}, false)
		<br>}
		<br>}
		<br>connectWebViewJavascriptBridge(function(bridge) {
		<br>bridge.init(function(message, responseCallback) {
		<br>var data = { 'Javascript Responds':'Wee!' }
		<br>responseCallback(data)
		<br>})
		<br>$("#albumPreviewButton").click( function(e) {
		<br>e.preventDefault()
		<br>bridge.callHandler('onAlbumPreview', {"data":"http://oss.iclass.cn/smallfiles/origin/1423794165654amvau.jpg,http://oss.iclass.cn/smallfiles/origin/1423794170097eefyq.jpg,http://oss.iclass.cn/smallfiles/origin/1423794176383flxsg.jpg|1"}, function(result) {
		<br>alert(result);
		<br>})
		<br>});
	</div>
</div>
<script type="text/javascript" src="/api/public/js/min/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(".codeContent").click(function(){
		var idName=$(this).attr("rel");
		$("#"+idName).attr("style","");
		$("#"+idName).siblings().attr("style","display:none;");
	});
	function connectWebViewJavascriptBridge(callback) {
		if (window.WebViewJavascriptBridge) {
			callback(WebViewJavascriptBridge)
		} else {
			document.addEventListener('WebViewJavascriptBridgeReady', function() {
				callback(WebViewJavascriptBridge)
			}, false)
		}
	}
	
	connectWebViewJavascriptBridge(function(bridge) {
		bridge.init(function(message, responseCallback) {
			var data = { 'Javascript Responds':'Wee!' }
			responseCallback(data)
		})
		
		$("#QRCodeButton").click( function(e) {
			e.preventDefault()
			bridge.callHandler('onQRCodeScan', {}, function(result) {
				alert(result);
			})
		});
		$("#selectPButton").click( function(e) {
			e.preventDefault()
			bridge.callHandler('onPplSelect', {}, function(result) {
				alert(result);
			})
		});
		$("#cameraButton").click( function(e) {
			e.preventDefault()
			bridge.callHandler('onPicTake', {}, function(result) {
				alert(result);
			})
		});
		$("#albumSelectButton").click( function(e) {
			e.preventDefault()
			bridge.callHandler('onAlbumSelect', {}, function(result) {
				alert(result);
			})
		});
		$("#albumPreviewButton").click( function(e) {
			e.preventDefault()
			bridge.callHandler('onAlbumPreview', {"data":"http://oss.iclass.cn/smallfiles/origin/1423794165654amvau.jpg,http://oss.iclass.cn/smallfiles/origin/1423794170097eefyq.jpg,http://oss.iclass.cn/smallfiles/origin/1423794176383flxsg.jpg|1"}, function(result) {
				alert(result);
			})
		});
	
	})
</script>