Vue.js暴露方法給WebView的使用操作
新建一個(gè)外部公共的js文件app.js，定義一個(gè)對(duì)象并輸出，如下：
var hybrid = {
}
window.Hybrid = hybrid
if (window.Vue) {
window.Vue.use(hybrid)
}
export { hybrid }
在需要的文件中引入app.js或者在main.js引入app.js，如下（引入到main.js）：
import { hybrid } from './common/app'
Vue.prototype.$hybrid = hybrid
將需要暴露的方法賦給hybrid對(duì)象，如下：
補(bǔ)充知識(shí)：將Vue項(xiàng)目methods中的方法暴露在window上
我是一個(gè)H5,咱們?cè)趯?xiě)APP的時(shí)候,也就是APP內(nèi)部嵌套咱們H5代碼的時(shí)候,肯定會(huì)遇到交互問(wèn)題,如果使用普通html js css的話(huà)應(yīng)該沒(méi)有什么太大的問(wèn)題,因?yàn)槠胀╦s方法都是暴露在window上面的,就我們公司的APP,使用回調(diào)的時(shí)候會(huì)在window上面找H5回調(diào)方法,
代碼這個(gè)樣子的
mounted() {
// 將backToday方法綁定到window下面，提供給外部調(diào)用
let me = this;
window['logoClickBtn'] = (url) => {
// Toast({ message: url, position: 'bottom', duration: 5000 });
me.logoClickBtn(url)
}
},
然后我寫(xiě)一下大概步驟是啥樣的 ,不然你只知道這樣寫(xiě),但是上一步的操作是什么
這方法肯定有觸發(fā)條件,再觸發(fā)的時(shí)候?qū)?shù)進(jìn)行傳入,與APP對(duì)接成功之后,會(huì)將再次調(diào)用咱們的函數(shù)也就是callBack,
我項(xiàng)目中是因?yàn)橐怯惺謾C(jī)中的拍照與手機(jī)圖片上傳,在咱們的頁(yè)面中應(yīng)該是這個(gè)樣子的在這里插入圖片描述
代碼是這個(gè)樣子的
當(dāng)與APP對(duì)接成功之后就會(huì)調(diào)用咱們傳過(guò)去的方法名了,但是APP端調(diào)用咱們的方法都是綁定在window上面的方法,故咱們應(yīng)該講咱們的方法暴露在window上面,因?yàn)閂ue項(xiàng)目中的this指向vue,而不是window,
代碼是這個(gè)樣子的
mounted() {
// 將backToday方法綁定到window下面，提供給外部調(diào)用
let me = this;
window['logoClickBtn'] = (url) => {
me.logoClickBtn(url); // 這個(gè)也就是我定義的方法
}
},
這一步是什么呢?就是APP會(huì)給咱們上傳的圖片的一個(gè)路徑,然后使用這個(gè)路徑在進(jìn)行下一步操作,也就是
logoClickBtn(url) {
this.form.logo = url; // 進(jìn)行數(shù)據(jù)驅(qū)動(dòng)試圖
},
然后咱們的頁(yè)面上就會(huì)有圖片了
因?yàn)榉?wù)沒(méi)有開(kāi),所以就不展示了 哈哈,這個(gè)步驟是可以走通的。
以上這篇Vue.js暴露方法給WebView的使用操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
關(guān)于elementUI select控件綁定多個(gè)值(對(duì)象)
這篇文章主要介紹了關(guān)于elementUI select控件綁定多個(gè)值(對(duì)象)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
這篇文章主要介紹了Vue.js 2.0 和 React、Augular等其他前端框架大比拼的相關(guān)資料,React 和 Vue 有許多相似之處,本文給大家提到，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本，隨著思路的展開(kāi)我們就來(lái)實(shí)現(xiàn)這個(gè)功能，需要的朋友可以參考下2023-10-10
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于uniapp中app與webview通訊的相關(guān)資料,這里的通信主要是打包APP端和web-view內(nèi)嵌網(wǎng)頁(yè)的雙向通信,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue中引入echarts的步驟及折線(xiàn)圖、柱狀圖常見(jiàn)配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線(xiàn)圖、柱狀圖常見(jiàn)配置項(xiàng),需要的朋友可以參考下2023-11-11
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下2018-05-05
解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問(wèn)題
今天小編就為大家分享一篇解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vite搭建vue2項(xiàng)目的實(shí)戰(zhàn)過(guò)程
自從體驗(yàn)了一下vite之后,真的太快了,然而對(duì)vue3還不是很熟練,就想著在vue2的項(xiàng)目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11