H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

本文地址:H5W3 » VUE H5调用原生APP方法实践笔记