Android中Webview與原生介面互動及二維碼掃描功能實現

阿新 • • 發佈：2019-01-16

最近專案中有一個新的需求，大致是這樣的：APP中通過WebView展示一個第三方的HTML5介面，使用者可以在HTML5介面中呼叫Android攝像頭進行二維碼掃描，並將掃描結果顯示在HTML5介面。這顯然涉及到了Android原生與WebView之前的傳值互動，由於之前對這一塊不是很瞭解，所以特地寫了一個小demo，方便自己以後使用，同時也分享給需要的人，先看一下demo的效果圖吧。
demo效果圖

我覺得主要有三個技術關鍵點：
1.Android 實現二維碼掃描功能
2.Webview中點選事件攔截及跳轉到原生二維碼掃描介面
3.將掃描結果更新到Webview介面中

下面具體說明一下：
demo中顯示在Webview中的HTML如下：

<body>
    <script>  
    //提供給Android呼叫的方法  
    function funFromjs(result){  
        document.getElementById("result").innerText= result;
    }  

    </script>  
    <a href='doScan' style='margin:30px;'>掃描二維碼</a>
    <div id="result" style="margin:10px;"></div 
>
</body>

其中funFromjs()方法是專門提供給Android原生呼叫的，將二維碼掃描結構通過這個方法更新到Webview介面上。

再看看Android端是如何攔截HTML中的點選事件，然後呼叫原生二維碼掃描的介面，並將掃描結果通過HTML中提供的js方法傳給webview展示的。直接上程式碼:

package com.djj.webviewdemo;

import android.Manifest;
import android.content.Intent;
import android.content.pm.PackageManager;
import 
 android.os.Build;
import android.support.annotation.NonNull;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private final static int SCANNIN_GREQUEST_CODE = 1;
    private WebView wvContent;
    private Button btnPhoto;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //檢查許可權
        checkPermission();

        wvContent = (WebView) findViewById(R.id.wv_content);

        // 設定WebView屬性，能夠執行Javascript指令碼
        wvContent.getSettings().setJavaScriptEnabled(true);
        // 設定Web檢視
        wvContent.setWebViewClient(new MyWebViewClient());
        String html ="<a href='doScan' style='margin:30px;'>掃描二維碼</a>";
               html +="<div></div>";
//        wvContent.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);
        wvContent.loadUrl("file:///android_asset/text.html");

    }


    // 監聽 所有點選的連結，如果攔截到我們需要的，就跳轉到相對應的頁面。
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {


            if (url != null && url.contains("doScan")) {
                Intent intent = new Intent();
                intent.setClass(MainActivity.this, MipcaActivityCapture.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivityForResult(intent, SCANNIN_GREQUEST_CODE);

//                finish();
                return true;
            }


            return super.shouldOverrideUrlLoading(view, url);
        }


        @Override
        public void onPageFinished(WebView view, String url) {
            view.getSettings().setJavaScriptEnabled(true);
            super.onPageFinished(view, url);


        }
    }

    // 覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && wvContent.canGoBack()) {
// webview.goBack();// 返回前一個頁面
            finish();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch (requestCode) {
            case SCANNIN_GREQUEST_CODE:
                if(resultCode == RESULT_OK){

                    //顯示掃描到的內容
                    String result="";
                    result += "掃描結果：";
                    result += data.getStringExtra("result").trim();
//                    Toast.makeText(MainActivity.this,"掃描的結果:"+result,Toast.LENGTH_LONG).show();
                    //更新webView內容

                    wvContent.loadUrl("javascript:funFromjs('" + result + "')");

                }
                break;
        }
    }

    private void checkPermission() {
        if (Build.VERSION.SDK_INT >= 23) {
            int checkCallPhonePermission = ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA);
            if(checkCallPhonePermission != PackageManager.PERMISSION_GRANTED){
                ActivityCompat.requestPermissions(MainActivity.this,new String[]{Manifest.permission.CAMERA,Manifest.permission.VIBRATE},333);
                return;
            }else{

            }
        } else {

        }
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }
}

通過監聽HTML中所有的點選事件，然後找出我們需要的那個點選事件，此demo中是監聽“doScan”，如果使用者點選了“二維碼掃描”，則會跳轉到原生的二維碼掃描介面，並在onActivityResult方法中返回掃描的結果，並通過wvContent.loadUrl(“javascript:funFromjs(‘” + result + “’)”);呼叫js方法，並將結果展示到Webview中。

非常感謝上面兩篇部落格的博主提供的技術支援，由於本人技術水平和寫作能力有限，以上若有描述錯誤及表述不當之處，還望諒解！

最後附上該demo的整個專案原始碼，供大家參考。
demo原始碼連結

Android中Webview與原生介面互動及二維碼掃描功能實現

Android中Webview與原生介面互動及二維碼掃描功能實現

android中Webview與javascript的互動（互相呼叫）

Android之在Fragment中使用二維碼掃描功能

Android 二維碼開發功能實現(五)-----對zxing進行優化,提高掃碼速度與精確度

Android 基於zxing的二維碼掃描功能的簡單實現及優化

Android實現二維碼掃描功能（二）-ZXing個性化與近距離識別優化

Android開發中的二維碼掃描功能

基於MUI框架的使用HTML5+實現的二維碼掃描功能並且其結果在webview中的資訊的傳遞

Android 二維碼開發功能實現(四)------基於Zxing實現編碼功能(生成二維碼,一維碼等)

Android實現二維碼掃描功能（三）-閃光燈控制

Android開發之Zbar實現二維碼掃描功能

iOS使用ZBar實現二維碼掃描以及實現識別相簿中二維碼圖片功能

Android中Webview與js互動

Android WebView 與原生的互動

Android中Service與Activity資料互動的簡單理解

Android：實際運用Zxing整合二維碼掃描及自定義掃碼介面（demo原始碼）

Android，二維碼掃描與產生模組

Android二維碼掃描開發（一）：實現思路與原理

Android二維碼掃描開發：實現思路與原理

高仿仿微信介面二維碼掃描效果之 Android 基於google Zxing實現二維碼、條形碼掃描

Android中Webview與原生介面互動及二維碼掃描功能實現

相關推薦