Android H5混合開發那點事(一)H5調用原生Android實現掃一掃功能

開發軟件:AndroidStudio,WebStorm
掃一掃庫文件下載:compile 'com.github.yuzhiqiang1993:zxing:2.2.5'
關鍵點:安卓與H5 方法互調,數據互通
整體思路:通過H5調用安卓原生方法進行掃一掃,之後回傳給H5頁面
最終效果:


完成這個功能,其主要功能實現放在了原生安卓上,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);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章