Android H5混合开发那点事（一）H5调用原生Androi
2019-02-19 本文已影响71人
极客简讯
开发软件：AndroidStudio,WebStorm
扫一扫库文件下载：compile 'com.github.yuzhiqiang1993:zxing:2.2.5'
关键点：安卓与H5 方法互调，数据互通
整体思路：通过H5调用安卓原生方法进行扫一扫，之后回传给H5页面
最终效果：
h5调用扫一扫功能.gif
完成这个功能，其主要功能实现放在了原生安卓上，h5端只做调用以及回显
首先咱们来看H5网页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 使页面适配手机屏幕 -->
<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来隐式创建一个 input 控件，然后实现直接访问相机的功能。-->
<div id="demoForClick">
<div id="btnID">H5调用安卓扫一扫功能</div>
</div>
<!-- 换行 -->
<button onclick='startTest()'>开始测试</button>
<label style='width: 100%;height: auto;word-wrap:break-word;word-break:break-all;overflow: hidden;' id='result'>测试结果：</label>
<script>
function startTest(){
window.android.takePhoto();
}
function testResult(content){
document.getElementById('result').innerHTML='测试结果:'+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互调方法定义
@JavascriptInterface //js接口声明
public void takePhoto() {
Intent intent = new Intent(MainActivity.this, CaptureActivity.class); //打开扫一扫
startActivityForResult(intent, REQUEST_CODE_SCAN);
}
}
4 设置安卓原生webview
myWebView.addJavascriptInterface(new JsInterface(), "android");
5 在回调方法中调用网页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);
}
}
}
总结：
扫一扫核心内容为原生与h5方法互调
在h5网页中通过以下代码调用原生方法
window.android.takePhoto();
需要在原生安卓中定义接口方法详情并设置
在原生安卓中通过以下代码调用h5方法
String method = "javascript:testResult('" + content + "')";
myWebView.loadUrl(method);
