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 H5调用原生APP方法实践笔记 的全部内容， 来源链接： utcz.com/a/13840.html

回到顶部