Android與Vue的交互的方法示例
做過 Android 混合開發(fā)的,應(yīng)該都知道 Android 中 Java 代碼和 Javascript 代碼之間的交互怎么做。
首先回顧一下 Java 和 Javascript 之間的交互。
JavaScript 調(diào)用 Java
Android 中 WebView 添加供 Html 頁面調(diào)用的 Java 方法:
mWebView.addJavascriptInterface(new DirectToJS(), "AndroidObj");
class DirectToJS{
@JavascriptInterface
public void showToast(){
Toast.makeText(this, "Android Toast",Toast.LENGTH_SHORT).show();
}
}
Html 頁面中 JavaScript 調(diào)用 Java 方法的方式如下:
window.AndroidObj.showToast();
JavaScript 代碼中: window 是網(wǎng)頁的 Window 實體,這個做前端開發(fā)的人都非常熟悉; AndroidObj 是 Android 端給 WebView 提供的一個實體,Android 會將這個實體賦給 WebView 的 window; showToast() 就是 Java 提供給 Html 的方法。
Java 調(diào)用 JavaScript
首先 Html 上寫個普通的 JavaScript 方法:
function showAlert(){
alert("Html Alert");
}
Android 中只要執(zhí)行以下代碼即可:
mWebView.loadUrl("javascript:showAlert()");
Vue 框架上的坑
如果前端用的是 Vue 框架,那么如果你在 js 腳本上直接寫一個方法,Android 是調(diào)用不到的,無論是寫在那個位置。
這是因為 Vue 框架中,腳本上的方法不是屬于 window 的方法,你應(yīng)該將要提供給 Android 調(diào)用的方法賦給 window,這樣,Android 中才能調(diào)得到:
window['showAlert'] = {
alert("Html Alert");
}
總得來說,對于普通的網(wǎng)頁,寫在 js 腳本上的方法,默認都是屬于 window 實體的;而 Vue 框架中,由于框架內(nèi)部的實現(xiàn)機制比較特殊,你寫在 js 腳本上的方法,不是真正頁面上的方法,所以在 Android 中是調(diào)用不到的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Anroid ListView分組和懸浮Header實現(xiàn)方法
這篇文章主要介紹了Anroid ListView分組和懸浮Header實現(xiàn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-11-11
android基礎(chǔ)總結(jié)篇之二:Activity的四種launchMode
這篇文章主要介紹了android基礎(chǔ)總結(jié)篇之二:Activity的四種launchMode,有需要的可以了解一下。2016-11-11
android實現(xiàn)始終顯示overflow菜單的方法
這篇文章主要介紹了android實現(xiàn)始終顯示overflow菜單的方法,需要的朋友可以參考下2014-07-07
Android android:exported = true 用法詳解
在本篇文章里小編給大家整理了關(guān)于Android android:exported = true 用法,需要的朋友們參考下。2019-09-09
RxJava加Retrofit文件分段上傳實現(xiàn)詳解
這篇文章主要為大家介紹了RxJava加Retrofit文件分段上傳實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01

