開發(fā)軟件：AndroidStudio,WebStorm
掃一掃庫文件下載：compile 'com.github.yuzhiqiang1993:zxing:2.2.5'
關(guān)鍵點：安卓與H5 方法互調(diào)蟹肘，數(shù)據(jù)互通
整體思路：通過H5調(diào)用安卓原生方法進(jìn)行掃一掃雇锡，之后回傳給H5頁面
最終效果：
h5調(diào)用掃一掃功能.gif
完成這個功能惕蹄，其主要功能實現(xiàn)放在了原生安卓上，h5端只做調(diào)用以及回顯
首先咱們來看H5網(wǎng)頁代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 使頁面適配手機(jī)屏幕 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title></title>
</head>
<body>
<!-- 這里是通過點擊某個Div來隱式創(chuàng)建一個 input 控件，然后實現(xiàn)直接訪問相機(jī)的功能。-->
<div id="demoForClick">
<div id="btnID">H5調(diào)用安卓掃一掃功能</div>
</div>
<!-- 換行 -->
<button onclick='startTest()'>開始測試</button>
<label style='width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden;' id='result'>測試結(jié)果：</label>
<script>
function startTest(){
window.android.takePhoto();
}
function testResult(content){
document.getElementById('result').innerHTML='測試結(jié)果:'+content;
}
</script>
</body>
</html>
接下來我們看原生部分
1 在build.gradle(project)中添加倉庫文件
allprojects {
repositories {
jcenter()
maven { url 'https://jitpack.io' } //倉庫地址
}
}
2 在build.gradle(app)中添加依賴
compile 'com.github.yuzhiqiang1993:zxing:2.2.5'
3 定義js接口類
private class JsInterface {
// 安卓原生與h5互調(diào)方法定義
@JavascriptInterface //js接口聲明
public void takePhoto() {
Intent intent = new Intent(MainActivity.this, CaptureActivity.class); //打開掃一掃
startActivityForResult(intent, REQUEST_CODE_SCAN);
}
}
4 設(shè)置安卓原生webview
myWebView.addJavascriptInterface(new JsInterface(), "android");
5 在回調(diào)方法中調(diào)用網(wǎng)頁H5方法
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
// 掃描二維碼/條碼回傳
if (requestCode == REQUEST_CODE_SCAN && resultCode == RESULT_OK) {
if (data != null) {
String content = data.getStringExtra(Constant.CODED_CONTENT);
showToast(content);
String method = "javascript:testResult('" + content + "')";
myWebView.loadUrl(method);
}
}
}
總結(jié)：
掃一掃核心內(nèi)容為原生與h5方法互調(diào)
在h5網(wǎng)頁中通過以下代碼調(diào)用原生方法
window.android.takePhoto();
需要在原生安卓中定義接口方法詳情并設(shè)置
在原生安卓中通過以下代碼調(diào)用h5方法
String method = "javascript:testResult('" + content + "')";
myWebView.loadUrl(method);
