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


Posted in Javascript onSeptember 07, 2020

新建一个外部公共的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.js暴露方法给WebView的使用操作

补充知识:将Vue项目methods中的方法暴露在window上

我是一个H5,咱们在写APP的时候,也就是APP内部嵌套咱们H5代码的时候,肯定会遇到交互问题,如果使用普通html js css的话应该没有什么太大的问题,因为普通js方法都是暴露在window上面的,就我们公司的APP,使用回调的时候会在window上面找H5回调方法,

代码这个样子的

mounted() {
   // 将backToday方法绑定到window下面,提供给外部调用
   let me = this;
   window['logoClickBtn'] = (url) => {
     // Toast({ message: url, position: 'bottom', duration: 5000 });
     me.logoClickBtn(url)
   }
 },

然后我写一下大概步骤是啥样的 ,不然你只知道这样写,但是上一步的操作是什么

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

这方法肯定有触发条件,再触发的时候将参数进行传入,与APP对接成功之后,会将再次调用咱们的函数也就是callBack,

我项目中是因为要是有手机中的拍照与手机图片上传,在咱们的页面中应该是这个样子的在这里插入图片描述

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

代码是这个样子的

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

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

当与APP对接成功之后就会调用咱们传过去的方法名了,但是APP端调用咱们的方法都是绑定在window上面的方法,故咱们应该讲咱们的方法暴露在window上面,因为Vue项目中的this指向vue,而不是window,

代码是这个样子的

mounted() {
     // 将backToday方法绑定到window下面,提供给外部调用
     let me = this;
     window['logoClickBtn'] = (url) => {
       me.logoClickBtn(url); // 这个也就是我定义的方法
     }
   },

这一步是什么呢?就是APP会给咱们上传的图片的一个路径,然后使用这个路径在进行下一步操作,也就是

logoClickBtn(url) {
     this.form.logo = url; // 进行数据驱动试图
   },

然后咱们的页面上就会有图片了

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

因为服务没有开,所以就不展示了 哈哈,这个步骤是可以走通的。

以上这篇Vue.js暴露方法给WebView的使用操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 #Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 #Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 #Javascript
一篇文章带你从零快速上手Rollup
Sep 07 #Javascript
基于vue hash模式微信分享#号的解决
Sep 07 #Javascript
在项目vue中使用echarts的操作步骤
Sep 07 #Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 #Javascript
You might like
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
PHP生成树的方法
2015/07/28 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
强制设为首页代码
2006/06/19 Javascript
prototype.js的Ajax对象
2006/09/23 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python中str.format()详解
2017/03/12 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
房屋转让协议书范本
2014/04/11 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
《1942》观后感
2015/06/08 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA