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