从 TypeScript 调用 Android 方法 [英] Call Android method from TypeScript

问题描述

Android 在 web view 中注入一个 JS 接口:

Android injects a JS interface into a web view:

JavaScriptInterface javaScriptInterface = new JavaScriptInterface(this);
browser.addJavascriptInterface(javaScriptInterface, "qp");

界面如下:

public class JavaScriptInterface {

    private ILoadEpi iLoadEpi;

    public JavaScriptInterface(ILoadEpi iLoadEpi) {
        this.iLoadEpi = iLoadEpi;
    }

    @JavascriptInterface
    public void passParameters(String fldMerchCode,
                               String fldMerchRefNbr,
                               String fldTxnAmt,
                               String fldTxnScAmt,
                               String fldDatTimeTxn,
                               String fldDate1,
                               String fldDate2
                               ) {
        Log.d("fldMerchCode", fldMerchCode);
        Log.d("fldMerchRefNbr", fldMerchRefNbr);
        Log.d("fldTxnAmt", fldTxnAmt);
        Log.d("fldTxnScAmt", fldTxnScAmt);
        Log.d("fldDatTimeTxn", fldDatTimeTxn);
        Log.d("fldDate1", fldDate1);
        Log.d("fldDate2", fldDate2);
        iLoadEpi.loadEpi(fldMerchCode, fldMerchRefNbr, fldTxnAmt, fldTxnScAmt, fldDatTimeTxn, fldDate1, fldDate2);
    }
}

使用 TypeScript 开发的 Web 应用程序如何调用此 Android?

How can a web app developed using TypeScript call this Android?

或者更广泛地说，TypeScript 应用程序如何调用 Android 方法?

Or more broadly, how can a TypeScript application call an Android method?

推荐答案

为将由 Android 注入的 JavaScriptInterface 类型添加 TypeScript 定义.然后用Android注入的实例名声明一个变量，然后照常使用.在您的示例中，您需要的定义是:

Add a TypeScript definition for the JavaScriptInterface type that will be injected by Android. Then declare a variable with the name of the instance injected by Android, then use it as normal. In your example, the definition you need is:

interface JavaScriptInterface {
    passParameters(fldMerchCode: string,
                   fldMerchRefNbr: string,
                   fldTxnAmt: string,
                   fldTxnScAmt: string,
                   fldDatTimeTxn: string,
                   fldDate1: string,
                   fldDate2: string) : void;
}

declare var qp: JavaScriptInterface;

Android 注入的 qp 实例将具有方法 passParameters 可用.该实例由 Android 在您对 browser.addJavaScriptInterface(javaScriptInterface, "qp"); 的调用中创建，名称为 qp.请注意，根据您的 passParameters 函数的使用方式，您可能需要将返回类型声明为 any 而不是 void.

The qp instance injected by Android will have the method passParameters available on it. The instance is created by Android with the name qp in your call to browser.addJavaScriptInterface(javaScriptInterface, "qp");. Note that, depending on how your passParameters function is used, you may need to declare the return type as any instead of void.

这是一个基于 Android JS 绑定指南的完整示例:

Here's a complete example based on the Android guide for binding JS:

在您的 HTML 文件中，添加:

In your HTML file, add:

<input type="button" value="Say hello" id ="button"/>
<script src="./generated/bundle.js"></script>

我假设您生成/转换的 JavaScript 位于 ./generated/bundle.js，相对于 HTML 文件.

where I assume that your generated/transpiled JavaScript is located at ./generated/bundle.js, relative to the HTML file.

在您的 TypeScript 文件中，添加:

In your TypeScript file, add:

interface WebAppInterface {
    showToast(toast: string) : any;
}

declare var android: WebAppInterface;

var button = document.getElementById('button');
button.onclick = ()=>android.showToast('Hello Android!');

请注意，链接的 Android 示例将注入的对象命名为 android:

Note that the linked Android example names the injected object android:

webView.addJavascriptInterface(new WebAppInterface(this), "android");

如果链接的示例发生更改或消失，这里是示例 WebAppInterface.java:

And in case the linked example changes or disappears, here is the example WebAppInterface.java:

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

这篇关于从 TypeScript 调用 Android 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！