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/

上一篇:jquery----Ajax


下一篇:js监听页面是否在浏览器当前页面