腳本之家服務器常用軟件

快捷導航

Vue.js暴露方法給WebView的使用操作

更新時間：2020年09月07日 11:03:34 作者：BennyShi98

這篇文章主要介紹了Vue.js暴露方法給WebView的使用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

新建一個外部公共的js文件app.js，定義一個對象并輸出，如下：

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對象，如下：

補充知識：將Vue項目methods中的方法暴露在window上

我是一個H5,咱們在寫APP的時候,也就是APP內(nèi)部嵌套咱們H5代碼的時候,肯定會遇到交互問題,如果使用普通html js css的話應該沒有什么太大的問題,因為普通js方法都是暴露在window上面的,就我們公司的APP,使用回調(diào)的時候會在window上面找H5回調(diào)方法,

代碼這個樣子的

mounted() {
   // 將backToday方法綁定到window下面，提供給外部調(diào)用
   let me = this;
   window['logoClickBtn'] = (url) => {
     // Toast({ message: url, position: 'bottom', duration: 5000 });
     me.logoClickBtn(url)
   }
 },

然后我寫一下大概步驟是啥樣的 ,不然你只知道這樣寫,但是上一步的操作是什么

這方法肯定有觸發(fā)條件,再觸發(fā)的時候將參數(shù)進行傳入,與APP對接成功之后,會將再次調(diào)用咱們的函數(shù)也就是callBack,

我項目中是因為要是有手機中的拍照與手機圖片上傳,在咱們的頁面中應該是這個樣子的在這里插入圖片描述

代碼是這個樣子的

當與APP對接成功之后就會調(diào)用咱們傳過去的方法名了,但是APP端調(diào)用咱們的方法都是綁定在window上面的方法,故咱們應該講咱們的方法暴露在window上面,因為Vue項目中的this指向vue,而不是window,

代碼是這個樣子的

mounted() {
     // 將backToday方法綁定到window下面，提供給外部調(diào)用
     let me = this;
     window['logoClickBtn'] = (url) => {
       me.logoClickBtn(url); // 這個也就是我定義的方法
     }
   },

這一步是什么呢?就是APP會給咱們上傳的圖片的一個路徑,然后使用這個路徑在進行下一步操作,也就是

logoClickBtn(url) {
     this.form.logo = url; // 進行數(shù)據(jù)驅動試圖
   },

然后咱們的頁面上就會有圖片了

因為服務沒有開,所以就不展示了哈哈,這個步驟是可以走通的。

以上這篇Vue.js暴露方法給WebView的使用操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js暴露方法給WebView的使用操作

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具