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

53 阅读 0 评论 35 点赞

我是靠谱客的博主文艺萝莉，最近开发中收集的这篇文章主要介绍H5网页唤醒app,判断app安装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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 是为了阻止重复加载

 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);