H5网页唤醒app,判断app安装

在阅读本文之前你首先应该对js有基本对掌握，并且对Scheme，intent有一定的理解。更多的是代码

上午给朋友做了一个产品引导页，但是需要判断ios系统的TestFlight是否安装，进行了google一下发现了callapp-lib库

很有效的解决了这个问题，但是并不是很完美，我也没有找到很完美的解决这个问题，包括我在本文所说的，只是一种很不入流的方式，但是还是有效的，

兼容情况就不说了，不考虑～，主要是就是唤醒你需要的软件。

callapp-lib
这里利用了别人的库，可以省略部分代码，`callapp-lib`可以直接唤醒app，以及唤醒失败的`callback`，但是你得传入Scheme。

`callapp-lib`库可能有一点问题，我也没有理解透彻，它并不给你提供唤醒成功`callback`的功能，所以需要我们自己补足。
文档：callapp-lib

import CallApp from 'callapp-lib'
const option = {
    scheme: {
        protocol: 'itms-beta',
    },
    outChain: {
        protocol: 'itms-beta',
        path: '',
    },
    appstore: 'http://www.apple.com',
    yingyongbao: 'http://www.zhihu.com',
    fallback: 'https://www.baidu.com',
    timeout: 3000,
};
const lib = new CallApp(option);
const callButton = document.querySelector('#call-button');
callButton.addEventListener('click', () => {
    vm.is_show = 1
    this.$toast.loading({
        mask: true,
        message: '加载中...'
    });
    lib.open({
        path: '/text',
        callback: function () {
            vm.is_show = 0
            self.$toast.fail('打开TestFlight失败,请先下载支持软件TestFlight');
            return false
        },
    
    });
});

 

　　

检测网页是否被切到后台运行，并监听该事件
`is_show` 是为了阻止重复加载
APP 如果被唤起的话，页面就会进入后台运行，会触发页面的 visibilitychange 事件。如果触发了，则表明页面被成功唤起，支持callback,如果失败的话就会触发前面`callapp-lib`我们传入的失败callback

 var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
    state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    state = "webkitVisibilityState";
}
document.addEventListener(visibilityChange, function () {
  // eslint-disable-next-line
  //这里判断不要重复下载
    if (vm.is_show == 1) {
      vm.is_show = 0
      alert('正在下载');
      location.reload()
    }

}, false);

 

原创不易，转载请附上原文出处链接,谢谢
原文链接：https://lihengc.github.io/2019/09/24/H5%E7%BD%91%E9%A1%B5%E5%94%A4%E9%86%92app-%E5%88%A4%E6%96%ADapp%E5%AE%89%E8%A3%85/