在 WebView Android 中扫描条码

Posted 2023-02-24

【中文标题】在 WebView Android 中扫描条码

【英文标题】：Scan Barcode Within WebView Android

【发布时间】：2014-12-17 12:09:45

【问题描述】：

我正在尝试在用户按下 html 中的按钮时启动条形码扫描仪。但是我收到一个错误：

Uncaught TypeError: Object [object Object] has no method 'scanBarcode'", source: file:///android_asset/www/index.html (49)

在 javascript 中调用的是：

function scanner() 
        Android.scanBarcode();
    

现在在 Java 文件中我有以下代码，它在public class JavaScriptInterface 内声明函数

这是我的MainActivity.java 文件：

public class MainActivity extends Activity 
@SuppressWarnings("deprecation")
@SuppressLint("SetJavaScriptEnabled") @Override
protected void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    WebView myWebView = (WebView)findViewById(R.id.webView);
    myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
    myWebView.setInitialScale(1);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    webSettings.setBuiltInZoomControls(false);
    webSettings.setSupportZoom(true);
    webSettings.setJavaScriptEnabled(true);
    webSettings.setLoadWithOverviewMode(true);
    webSettings.setUseWideViewPort(true);
    //webView.getSettings().setJavaScriptEnabled(true);
    myWebView.setWebChromeClient(new WebChromeClient());
    //myWebView.setWebViewClient(new WebViewClient());
    myWebView.loadUrl("file:///android_asset/www/index.html");


public class JavaScriptInterface 
    Context mContext;

    // Instantiate the interface and set the context
    JavaScriptInterface(Context c) 
        mContext = c;
    

    // using Javascript to call the finish activity
    public void closeMyActivity() 
        finish();
    

    public void scanBarcode() 
        Intent intent = new Intent("com.google.zxing.client.android.SCAN");
        intent.setPackage("com.google.zxing.client.android");
        startActivityForResult(intent, 0);
    
   //JavascriptInterface

public void onActivityResult(int requestCode, int resultCode, Intent intent) 
    if (requestCode == 0) 
        if (resultCode == RESULT_OK) 
            //here is where you get your result
            String barcode = intent.getStringExtra("SCAN_RESULT");
        
    

现在这是我在网上找到的一个代码示例，对我来说一切都很好，最初我唯一要做的就是导入所有必要的库，并将barcode 变量定义为字符串类型。

任何帮助将不胜感激。或者可能是从网络视图访问条形码扫描仪功能的不同方法..

【参考方案1】：

...
    myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
...
public class JavaScriptInterface 

您已经调用了接口类 JavaScriptInterface，但创建了一个新的 WebAppInterface 以传递给 WebView。

编辑

上述答案仍然成立：您永远不会向您的 WebView 注册接口 (JavaScriptInterface)，因此您将无法访问这些方法 (scanBarcode)。

由于您的 WebView 中实际上需要两个接口，因此您需要添加两个接口

myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
myWebView.addJavascriptInterface(new JavaScriptInterface(this), "Scanner");

在您的 javascript 中，您将有两个对象 Android 和 Scanner 对应于这两个接口。 Android 将具有 WebAppInterface 中定义的所有方法，而 Scanner 将具有 JavaScriptInterface 中定义的方法。你的javascript函数变成了

function scanner() 
    Scanner.scanBarcode();

编辑 2

如果您的目标是 sdk 版本 17 或更高版本，您还必须注释要在 javascript 中使用的方法

public class JavaScriptInterface 
...
    @JavascriptInterface
    public void scanBarcode() 
    ...
    

奖励：一些不请自来的建议，使用更好的名称。如果 WebAppInterface 提供了与您的应用程序数据交互的方法，则将其称为 DataInterface（即使这可能过于通用，但我不知道您的应用程序使用哪种数据）。由于 JavaScriptInterface 启动扫描器并关闭应用程序，也许您可​​以将其称为 ActionInterface。将它们作为“AppData”和“AppActions”传递给您的 WebView 可以为您提供像 AppData.getCategories() 和 AppActions.closeMyActivity() 这样的函数，它们更符合逻辑。

【讨论】：

是的，然后我有一个名为WebAppInterface.java 的文件听说我有许多从我的javascript 调用的函数，例如Android.showCategories() 这是我必须调用我的条形码扫描函数的地方吗？不在MainActivity 中，这是有道理的，但是一些默认函数没有定义。例如startActivityForResult(intent, 0); 和常量RESULT_OK 对此有何建议？

我将之前的代码移动到正确的文件中，并按照我的问题底部的描述进行了修复。我现在有一个不同的问题，所以我编辑了我的问题以显示这一点。

您可以定义多个接口，但您需要将它们全部单独添加并赋予它们唯一的名称。查看我的编辑

@jburley89 这并不是 *** 的工作原理。如果您有新问题，请发布新问题。

好的，感谢您当时的编辑 :) 如您所述，我已尝试添加新的 Scanner，但收到 Cannot instantiate the type JavascriptInterface 错误