vue h5 页面调起原生APP指定页面

这次分享可能比较适合小白，大神们多多指教哈！为什么这么说呢，因为我之前都是做pc，或者小程序、rn 什么的，原生app内嵌h5这种还是第一次。

最近提了个需求：app下载页 如果当前应用已经安装就直接打开scheme全路径对应的页面，没有安装就点击去下载页面，大致业务流程如下

都确定了就开搞吧，刚开始就是按照传统的思维来一步一步的 做各种判断，但是发现有些浏览器，还要做内核判断，打开方式做特殊处理，当时仿照的就是支付宝做吗 ，做了个测试demo自测发现支付宝在UC上面可以调起app，虽然UC大部分人不会做默认浏览器，但是也算是常用的吧 ，百度，qq浏览器这些就不考虑了因为做了限制是不允许这种操作的，然后又一顿🍵一顿搞。。。。最终的解决方案来了！！！！！

在找的过程中发现了一个插件 callapp-lib

直接上代码吧：

npm install --save callapp-lib

// install成功后页面直接引用
import CallApp from 'callapp-lib';

    openApp() {
      const options = {
        scheme: {
          protocol: ''//APP 协议，URL Scheme 的 scheme 字段，就是你要打开的 APP 的标识
        },
        appstore:'' ,//填写appstore的下载地址
        yingyongbao: '',//填写应用宝的下载地址  
        fallback: '',//填写唤端失败后跳转的地址
        //小技巧哈！要是仿照支付宝这种检测没有app后，点击打开app留在当前页面，appstore、yingyongbao、
        //fallback都写当前地址就好了window.location.href获取一下就好了
        timeout: 5000,
      };
      const callLib = new CallApp(options);

      callLib.open({
        param: '',
        path: ''
      });
       //小技巧哈！这里因为后台直接返回没有Scheme的路径部分所以路由信息和参数是在
       //一起我就懒得处理了就直接给到path也可以正常执行的比如：
       // Scheme:///aaaa/bbbb?login=1  整体路径
       // /aaaa/bbbb?login=1  path部分直接赋值上去就不用在处理参数问题了
       console.log(callLib.generateScheme({
      //打印最终路径。。。。
      }));
    },

 然后就是mounted调用一下页面打开先执行一次，然后把这个openApp再绑定在 ‘打开app’ 的元素上面就ok了亲测好用！！！！省时省力

 至于那些原理上面的东西就不多说了，，但是想了解的话百度那种手写的那种看看就有很大帮助的，能多学到一点，好啦。就这样。。下班下班！！！