Anropa Android-metod från TypeScript

Android injicerar ett JS-gränssnitt i en webvy:

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

Gränssnittet ser ut så här:

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);
    }
}

Hur kan en webbapp utvecklad med TypeScript anropa den här Androiden?

Eller mer generellt, hur kan en TypeScript-applikation anropa en Android-metod?

Svar #1

Lägg till en TypeScript-definition för typen JavaScriptInterface som kommer att injiceras av Android. Deklarera sedan en variabel med namnet på instansen som injiceras av Android, och använd den sedan som vanligt. I ditt exempel är definitionen du behöver:

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

declare var qp: JavaScriptInterface;

Instansen qp som injiceras av Android kommer att ha metoden passParameters tillgänglig på sig. Instansen skapas av Android med namnet qp i ditt anrop till browser.addJavaScriptInterface(javaScriptInterface, "qp");. Observera att beroende på hur din passParameters-funktion används, kan du behöva deklarera returtypen som any istället för void.

Här är ett komplett exempel baserat på Android-guiden för att binda JS:

Lägg till i din HTML-fil:

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

där jag antar att din genererade/transpilerade JavaScript finns på ./generated/bundle.js, relativt till HTML-filen.

I din TypeScript-fil, lägg till:

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

declare var android: WebAppInterface;

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

Observera att det länkade Android-exemplet namnger det injicerade objektet android:

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

Och om det länkade exemplet ändras eller försvinner, här är exemplet 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();
    }
}

Relaterade artiklar