vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记

最近做与app端的混合开发，了解到了H5与原生app端之间的方法互通

首先是我们给app端定义方法供他们使用(以vue为例)

methods中定义一个方法名称

VContent() {

console.log("给app用的方法")

// 接着我们将这个方法在生命周期中挂载到window即可，没错，就是这么简单

mounted(){

window.VerifyContent = this.VerifyContent;

// 这样app端就可以使用我们的这个方法了

有的时候还会安卓和ios端需要区别处理的情况

getDemo() {

let u = navigator.userAgent;

let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (isiOS) {

//ios端的操作

} else {

//安卓端的操作

}

// 同样将这个方法在生命周期中挂载到window即可

在这些方法中是支持参数传递的，比如我在开发过程中 ios支持给我的方法传递多个参数，而安卓端则需要将所有参数合并为一个对象传递给我

那我们H5怎么调用app端的方法呢？

首先是Android

安卓端会由 app 向 h5 注入一个全局 js 对象，然后在 h5 直接访问这个对象，类似这样

H5调用起来也很简单：

try {

window.android.XXX(type, id);

} catch (error) {

console.log("Android error");

}

// android就是上方图片里那个name,面跟的.XXX便是安卓给你的方法

接下来是ios

try {

window.webkit.messageHandlers.XXX.postMessage(JSON.str ingify(json));

} catch(error) {

console.log("ios error");

}

// 这个XXX 就是ios给你的方法

vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记相关推荐

h5调用原生App的方法合集
h5调用原生App的方法合集 1.调用原生关闭函数 let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 | ...
【Kotlin】Kotlin 类的继承三 ( super 关键字使用 | super@ 外部调用父类方法 | 子类选择性调用父类 / 接口方法 super )
文章目录 I . 子类调用父类总结 II . 子类调用父类方法 ( super ) III . 子类内部类调用父类方法 ( super@ ) IV . 子类选择调用不同的父类 / 接口方法 ( su ...
Vue学习（组件的定义及调用、路由）-学习笔记
文章目录 Vue学习(组件的定义及调用.路由)-学习笔记 Vue学习(组件的定义及调用.路由)-学习笔记可见代码参考学习:https://gitee.com/monkeyhlj/vue-learni ...
java 调用父级方法_java子类调用父类的方法是什么
java子类调用父类的方法:1.子类的对象调用方法时,会首先在子类中查找,如果子类中没有该方法,再到父类中查找:2.如果该方法中又调用了其他方法,那么还是按照之前的顺序,先在子类中查找,再在父类中查找 ...
JS跟APP交互——H5调用原生APP的方法
js向app传值问题最近做的H5项目是需要嵌入到APP内使用的,这就涉及到js跟app交互的问题,我这边需要传值给app,以下是我在做项目过程中传值的方法,仅供参考. 解决方法 AppData这个J ...
安卓WebView(H5)调用原生相机及相册
在开始叙述正文之前笔者先声明一下应用场景:例如在网页上的即时通讯需要能拍照或者从图库选择图片来进行上传,此场景下就可以用到这篇文章的内容正文首先,如果你已经把相机以及访问文件夹的权限都加上了并且W ...
js调用android.webkit,h5调用原生App的方法合集 window.webkit.messageHandlers
测试demo 调用原生关闭函数 let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 || u.indexO ...
FileReader()读取文件，h5调用原生相机拍照，FormData()上传服务器
公司最近在做一个h5嵌入原生的项目,其中有一个需求是在没有和原生交互的前提下,调用调用手机相机进行拍照,然后将照片上传后端. 之前没接触过类似的需求,然后就感觉要调用移动端的硬件设备很是高大上:现在项 ...
vue获取微信登陆权限_vue 微信授权登录解决方案
背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息. 问题:没有固定的h5应用首页.授权后重定向url带参数并且很长 ...

vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记

vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记相关推荐

最新文章

热门文章