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操作ajax返回的json的注意问题!
Feb 23 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python饼状图的绘制实例
2019/01/15 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python3开发环境搭建详细教程
2020/06/18 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
公司出纳岗位职责
2013/12/07 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
2015年工程部工作总结
2015/04/30 职场文书
入党转正申请书范文
2019/05/20 职场文书
Python如何配置环境变量详解
2021/05/18 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫