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给你的方法