如何通过浏览器调用APP的方法及问题

Lindo

August 23, 2019

1811 views

No comments

2135 words

FrontEnd

导语

经常遇到浏览某些网站的页面时，提示你下载他的APP。

已经发现封装好的通用JS方法

使用JS检测协议是否存在

移动端开发，一个绕不开的问题就是，如何在H5页面中，把用户引流到自家的APP中，现通用的方法如下图所示：最上方可关...

下列方法为自己摸索。

因为单纯个人兴趣，本博客中的代码只在IOS（ios 12.4， xs max）实测过，Android端需要自己实测，并不完全保证其正确性，如果IOS端如果问题也请自己查看官方safari的文档。Safari的版本根据ios版本而有所不同，本人遇到过低版本的Safari与高版本Safari支持的浏览器不同的情况，故，若需要实际开发，请多多测试！

demo

原理

粗略了解下来，安装APP后你的终端设备就会多一个APP相对应的协议，通过这个协议你可以打开APP，当然也可以附带一些参数，从而实现更加复杂的操作，比如支付宝或者微信的支付功能。想深入了解的下面有简书上找到的解释（我没太看懂）

实现

IOS

IOS 因为浏览器内核强制为safari所以方法统一，只需要在添加一个meta就可以了

    <meta name='apple-itunes-app' content='app-id=477927812'>
    <!-- 上面的方法仅限于iOS设备，且无法定义Banner的形式。另外打开应用时也无法告诉App端要做什么操作。 -->
    <!-- app-id 对应 App Store里面ID，我使用的百度贴吧的ID-->

效果图

通用方法

    <a href="weixin://">打开微信</a>
    <a href="com.baidu.tieba://">打开贴吧</a>
    <!-- 相对应的协议对应相应的APP -->
    <!-- 引出问题，我没安装软件怎么办？如何合理的校验以及提示 -->

优化

用户没有安装你的软件，怎么办呢？
常用的办法就是，在页面中出现一个按钮，提示你‘在App中打开’，点击按钮，如果APP已安装，则直接打开，若没安装，则跳转到相应的安装页面

code

    function openApp(){
      let loadDateTime = Date.now();
      setTimeout(function () {
        var timeOutDateTime = new Date();
        if (!loadDateTime || timeOutDateTime - loadDateTime < 2010) {
          if (document.visibilityState === 'visible') { window.location = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.diaox2.android&ckey=CK1308661595241'; }
        }
      },2000);
      window.location = 'weixin://';
    }

效果图：