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内部嵌套咱们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)
}
},
然后我写一下大概步骤是啥样的 ,不然你只知道这样写,但是上一步的操作是什么
这方法肯定有触发条件,再触发的时候将参数进行传入,与APP对接成功之后,会将再次调用咱们的函数也就是callBack,
我项目中是因为要是有手机中的拍照与手机图片上传,在咱们的页面中应该是这个样子的在这里插入图片描述
代码是这个样子的
当与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中请求接口中，一个请求方法可能对应后台两个请求接口，所以请求参数就会有所不同。需要我们先设置共同的参数，然后根据条件动态添加参数属性2022-08-08
关于vue-lunar-full-calendar的使用说明
这篇文章主要介绍了关于vue-lunar-full-calendar的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
这篇文章主要介绍了详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要介绍了Vue虚拟Dom到真实Dom的转换，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要介绍了Vue之data定义的三种方式及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue框架中如何调用模拟数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了vue如何关闭prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue编译器源码分析compileToFunctions作用详解
这篇文章主要为大家介绍了Vue编译器源码分析compileToFunctions作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了vue3自定义指令实现按钮防抖示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结合实例形式分析了vue slot插槽基本使用方法与操作注意事项,需要的朋友可以参考下2020-02-02
最新评论