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

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

android 原生如何给H5传值 h5怎么调用原生app功能_vue

android 原生如何给H5传值 h5怎么调用原生app功能_android 原生如何给H5传值_02

都确定了就开搞吧,刚开始就是按照传统的思维来一步一步的 做各种判断,但是发现有些浏览器,还要做内核判断,打开方式做特殊处理,当时仿照的就是支付宝做吗 ,做了个测试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了亲测好用!!!!省时省力

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