在Android WebView中扫描条形码

Question

在Android WebView中扫描条形码

javajavascriptandroidzxingbarcode-scanner

4

我正在尝试在用户按下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变量为字符串类型。

非常感谢任何帮助。或者也许可以使用不同的方法从Web视图中访问条形码扫描功能。

- OniJoshin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Enrico · Accepted Answer

...
    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() 这样更加合理的函数。