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/