Android H5混合开发

最新推荐文章于 2024-05-09 13:20:04 发布

DevilNoV

最新推荐文章于 2024-05-09 13:20:04 发布

阅读量2.2k

点赞数 1

分类专栏： Android

本文链接：https://blog.csdn.net/devilnov/article/details/108884212

版权

Android 专栏收录该内容

113 篇文章 4 订阅

订阅专栏

关键点：安卓与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);

DevilNoV

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Android H5混合开发

关键点：安卓与H5 方法互调，数据互通整体思路：通过H5调用安卓原生方法进行扫一扫，之后回传给H5页面最终效果：h5调用扫一扫功能.gif完成这个功能，其主要功能实现放在了原生安卓上，h5端只做调用以及回显首先咱们来看H5网页代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!-- 使页面适配手机屏幕 --&gt...
复制链接

扫一扫