Android與Vue的交互的方法示例
做過(guò) Android 混合開(kāi)發(fā)的,應(yīng)該都知道 Android 中 Java 代碼和 Javascript 代碼之間的交互怎么做。
首先回顧一下 Java 和 Javascript 之間的交互。
JavaScript 調(diào)用 Java
Android 中 WebView 添加供 Html 頁(yè)面調(diào)用的 Java 方法:
mWebView.addJavascriptInterface(new DirectToJS(), "AndroidObj"); class DirectToJS{ @JavascriptInterface public void showToast(){ Toast.makeText(this, "Android Toast",Toast.LENGTH_SHORT).show(); } }
Html 頁(yè)面中 JavaScript 調(diào)用 Java 方法的方式如下:
window.AndroidObj.showToast();
JavaScript 代碼中: window 是網(wǎng)頁(yè)的 Window 實(shí)體,這個(gè)做前端開(kāi)發(fā)的人都非常熟悉; AndroidObj 是 Android 端給 WebView 提供的一個(gè)實(shí)體,Android 會(huì)將這個(gè)實(shí)體賦給 WebView 的 window; showToast() 就是 Java 提供給 Html 的方法。
Java 調(diào)用 JavaScript
首先 Html 上寫(xiě)個(gè)普通的 JavaScript 方法:
function showAlert(){ alert("Html Alert"); }
Android 中只要執(zhí)行以下代碼即可:
mWebView.loadUrl("javascript:showAlert()");
Vue 框架上的坑
如果前端用的是 Vue 框架,那么如果你在 js 腳本上直接寫(xiě)一個(gè)方法,Android 是調(diào)用不到的,無(wú)論是寫(xiě)在那個(gè)位置。
這是因?yàn)?Vue 框架中,腳本上的方法不是屬于 window 的方法,你應(yīng)該將要提供給 Android 調(diào)用的方法賦給 window,這樣,Android 中才能調(diào)得到:
window['showAlert'] = { alert("Html Alert"); }
總得來(lái)說(shuō),對(duì)于普通的網(wǎng)頁(yè),寫(xiě)在 js 腳本上的方法,默認(rèn)都是屬于 window 實(shí)體的;而 Vue 框架中,由于框架內(nèi)部的實(shí)現(xiàn)機(jī)制比較特殊,你寫(xiě)在 js 腳本上的方法,不是真正頁(yè)面上的方法,所以在 Android 中是調(diào)用不到的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
android 仿微信demo——微信通訊錄界面功能實(shí)現(xiàn)(移動(dòng)端,服務(wù)端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,希望能給你們提供幫助2021-06-06Android視圖控件架構(gòu)分析之View、ViewGroup
這篇文章主要為大家詳細(xì)介紹了Android視圖控件架構(gòu)分析之View、ViewGroup,感興趣的朋友可以參考一下2016-05-05Kotlin使用flow實(shí)現(xiàn)倒計(jì)時(shí)功能(示例詳解)
這篇文章主要介紹了Kotlin使用flow實(shí)現(xiàn)倒計(jì)時(shí)功能,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02直接可用的Android studio學(xué)生信息管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了直接可用的Android studio學(xué)生信息管理系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01Flutter listview如何實(shí)現(xiàn)下拉刷新上拉加載更多功能
這篇文章主要給大家介紹了關(guān)于Flutter listview如何實(shí)現(xiàn)下拉刷新上拉加載更多功能的相關(guān)資料,對(duì)于新聞列表數(shù)據(jù)的更新和加載更多是必不可少的,而實(shí)現(xiàn)下拉刷新與上劃加載更多的方式有很多種,需要的朋友可以參考下2021-08-08基于Android實(shí)現(xiàn)自動(dòng)滾動(dòng)布局
在平時(shí)的開(kāi)發(fā)中,有時(shí)會(huì)碰到這樣的場(chǎng)景,設(shè)計(jì)上布局的內(nèi)容會(huì)比較緊湊,導(dǎo)致部分機(jī)型上某些布局中的內(nèi)容顯示不完全,或者在數(shù)據(jù)內(nèi)容多的情況下,單行無(wú)法顯示所有內(nèi)容,這里給大家簡(jiǎn)單介紹下布局自動(dòng)滾動(dòng)的一種實(shí)現(xiàn)方式,感興趣的朋友可以參考下2023-12-12詳談Android中Matrix的set、pre、post的區(qū)別
下面小編就為大家?guī)?lái)一篇詳談Android中Matrix的set、pre、post的區(qū)別。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04android設(shè)備不識(shí)別awk命令 缺少busybox怎么辦
這篇文章主要為大家詳細(xì)介紹了android設(shè)備不識(shí)別awk命令,缺少busybox的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04Android Studio 升級(jí)到3.0后輸入法中文狀態(tài)下無(wú)法選詞的終極解決方案
這篇文章主要介紹了 AndroidStudio 升級(jí)到3.0后輸入法中文狀態(tài)下無(wú)法選詞的解決方案,需要的朋友可以參考下2017-11-11Android BottomNavigationBar底部導(dǎo)航控制器使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android BottomNavigationBar底部導(dǎo)航控制器使用方法,感興趣的小伙伴們可以參考一下2016-03-03