android - 从 TypeScript 调用 Android 方法

Question

Android 将 JS 接口(interface)注入(inject)到 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？

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

Answer 1

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

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

declare var qp: JavaScriptInterface;

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

这是一个基于 Android guide for binding JS 的完整示例:

在您的 HTML 文件中，添加:

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

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

在您的 TypeScript 文件中，添加:

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

declare var android: WebAppInterface;

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

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

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

如果链接示例发生变化或消失，这里是 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();
    }
}