h5页面下载或打开APP

已知问题

1.在微信内Android不支持打开APP和跳转到下载页面
2.在微信内iOS不支持直接打开APP但是可以跳转到App Store

实现步骤

1.判断iOS和Android
2.iOS判断是否在微信中，
-是，无论是否已有APP都直接跳转到App Store
-否，直接打开APP或跳转到App Store
3.Android判断是否在微信中，
-是，提示用户用浏览器打开页面，再直接打开APP或跳转下载页面
-否，直接打开APP或跳转下载页面

实现代码

handleNextPage = () => {

        let d = new Date();
        let t0 = d.getTime();
        // 判断是安卓还是ios
        if(this.isAndroid_ios()) {
            if(this.isWeiXin()) {
                // 引导用户在浏览器中打开
                Alert.hint('请在浏览器中打开本链接', 3000);
                return;
            }
            //Android
            if(this.openApp('msfacepay://')){
                this.openApp('msfacepay://');
            }else{
                //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
                let delay = setInterval(function(){
                    let d = new Date();
                    let t1 = d.getTime();
                    if( t1-t0<3000 && t1-t0>2000){
                        window.location.href = "app下载地址";
                    }
                    if(t1-t0>=3000){
                        clearInterval(delay);
                    }
                },1000);
            }
            // window.location.href = "msfacepay://";
            // window.setTimeout(function(){
            //  Alert.hint('暂未开通，敬请期待', 1500);
            //  // window.location.href = "https://itunes.apple.com/cn/app/id1419477919";//打开app下载地址，由app开发人员提供
            // },2000)
        }else {
            if(this.isWeiXin()) {
                window.location.href = 'https://itunes.apple.com/cn/app/id1419477919'
                return;
            }
            //IOS
            // window.location.href = 'msfacepay://'
            // if(openApp('msfacepay://')){  
            //     openApp('msfacepay://');
            // }else{
            //     var delay = setInterval(function(){
            //         var d = new Date();
            //         var t1 = d.getTime();
            //         if( t1-t0<3000 && t1-t0>2000){
            //             alert('请下载APP');
            //             window.location.href = "https://itunes.apple.com/cn/app/id1419477919";
            //         }
            //         if(t1-t0>=3000){
            //             clearInterval(delay);
            //         }
            //     },1000);
            // }
            //iOS不支持iframe打开APP
            window.location.href = "msfacepay://";
            window.setTimeout(function(){
                window.location.href = "https://itunes.apple.com/cn/app/id1419477919";//打开app下载地址，由app开发人员提供
            },2000)
        }
    };

//判断是安卓还是iOS
    isAndroid_ios(){  
        let u = navigator.userAgent, app = navigator.appVersion;  
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器  
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端  
        return isAndroid == true ? true : false ;  
    }

//判断是否微信
    isWeiXin() {
        if(/MicroMessenger/gi.test(navigator.userAgent)) {
            return true;
        }else {
            return false;
        }
    }

openApp(src) {
        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
        // 否则打开a标签的href链接
        let ifr = document.createElement('iframe');
        ifr.src = src;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        window.setTimeout(function(){
            document.body.removeChild(ifr);
        },2000);
    }

注：iOS在浏览器中直接打开APP时，如果未找到对应程序，浏览器会弹出“Safari浏览器打不开该网页，因为网址无效”。需要手动点击一下，才会出现下一个“在App Store中打开链接吗？”

影响用户体验，还没想到好的解决办法。