Android與Vue的交互的方法示例
做過 Android 混合開發(fā)的,應該都知道 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 的方法,你應該將要提供給 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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android 仿微信demo——微信通訊錄界面功能實現(xiàn)(移動端,服務端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能給你們提供幫助2021-06-06Android視圖控件架構(gòu)分析之View、ViewGroup
這篇文章主要為大家詳細介紹了Android視圖控件架構(gòu)分析之View、ViewGroup,感興趣的朋友可以參考一下2016-05-05Kotlin使用flow實現(xiàn)倒計時功能(示例詳解)
這篇文章主要介紹了Kotlin使用flow實現(xiàn)倒計時功能,本文通過圖文實例相結(jié)合給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02直接可用的Android studio學生信息管理系統(tǒng)
這篇文章主要為大家詳細介紹了直接可用的Android studio學生信息管理系統(tǒng),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-01-01Flutter listview如何實現(xiàn)下拉刷新上拉加載更多功能
這篇文章主要給大家介紹了關(guān)于Flutter listview如何實現(xiàn)下拉刷新上拉加載更多功能的相關(guān)資料,對于新聞列表數(shù)據(jù)的更新和加載更多是必不可少的,而實現(xiàn)下拉刷新與上劃加載更多的方式有很多種,需要的朋友可以參考下2021-08-08詳談Android中Matrix的set、pre、post的區(qū)別
下面小編就為大家?guī)硪黄斦凙ndroid中Matrix的set、pre、post的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04android設(shè)備不識別awk命令 缺少busybox怎么辦
這篇文章主要為大家詳細介紹了android設(shè)備不識別awk命令,缺少busybox的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04Android Studio 升級到3.0后輸入法中文狀態(tài)下無法選詞的終極解決方案
這篇文章主要介紹了 AndroidStudio 升級到3.0后輸入法中文狀態(tài)下無法選詞的解決方案,需要的朋友可以參考下2017-11-11Android BottomNavigationBar底部導航控制器使用方法詳解
這篇文章主要為大家詳細介紹了Android BottomNavigationBar底部導航控制器使用方法,感興趣的小伙伴們可以參考一下2016-03-03