vue h5判断安卓或IOS并打开APP

最近一直在忙，可能也是因为年底了，所有的项目都要收尾。好几个项目穿插开发，中间也遇到了些问题同时也学到了之前没涉及到的知识点。今天虽然是周六，但还是在加班中，趁着需求还在确认中，先整理一篇笔记。还有一个月就要2023年了，这一年遇到的问题和学习到的都要沉淀总结下。
首先还是先梳理清晰需求，当app分享到微信，打开后是个H5页面，根据当前用户去判断是否已下载APP，没有下载跳转到应用宝或者APP store。如果下载了则唤起app。

 <van-button type="primary" size="small" class="openBtn" @click="openApp">打开APP</van-button>

//打开app
            openApp() {
                const u = navigator.userAgent;
                const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (isiOS) {
                    alert("ios");
                    window.location.href = '// ios对应的app协议'; // ios对应的app协议
                    setTimeout(function() {
                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
                        if (typeof hidden == "undefined" || hidden == false) {
                            //App store下载地址
                            window.location.href = "";
                        }
                    }, 500);
                } else {
                    alert("andriod");
                    window.location.href = '// 安卓对应的app协议'; // 安卓对应的app协议
                    setTimeout(function() {
                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
                        if (typeof hidden == "undefined" || hidden == false) {
                            //应用宝下载地址
                            window.location.href = ""; 
                        }
                    }, 500);
                }
            }

首先我们先判断手机是那种机型，然后根据判断 填写app协议和下载地址，这些都是需要后端或者原生开发的同学提供给我们。