美文网首页
判断Android,iOS,微信浏览器

判断Android,iOS,微信浏览器

作者: ThemisHoo | 来源:发表于2019-06-21 22:51 被阅读0次
import React from 'react';
import { BaseComponent, Alert } from 'components';
import { Url } from 'utils';

export default class DownApp extends BaseComponent {
    constructor(props) {
        super(props);

        this.state = {
            downAndroidUrl: 'https://****.apk' , // 安卓下载地址
            downiOSUrl: 'https://itunes.apple.com/cn/app/id1****5', // iOS下载地址
            protocolUrl: '****://', // 安卓iOS协议地址
        }
      
    }

    handleNextPage = () => {

        let d = new Date();
        let t0 = d.getTime();
        // 判断是安卓还是ios
        if(this.isAndroid_ios()) {
            if(this.isWeiXin()) {
                // 引导用户在浏览器中打开
                Alert.hint('请在浏览器中打开本链接', 3000);
                return;
            }
            if(this.openApp(this.state.protocolUrl)) {
                this.openApp(this.state.protocolUrl)
                return;
            }
                //由于打开需要1~2秒,利用这个时间差来处理--打开app后,返回h5页面会出现页面变成app下载页面,影响用户体验
                let delay = setInterval(() => {
                    let d = new Date();
                    let t1 = d.getTime();
                    if( t1-t0<3000 && t1-t0>2000){
                        if (parseInt(result.code) === 0) {
                            this.setState({
                                downAndroidUrl: result.data.downloadUrl
                            })
                            window.location.href = result.data.downloadUrl || this.state.downAndroidUrl;
                        }else {
                            window.location.href = this.state.downAndroidUrl;
                        }
                    }
                    if(t1-t0>=3000){
                        clearInterval(delay);
                    }
                },1000);

            
        }else {
            if(this.isWeiXin()) {
                window.location.href = this.state.downiOSUrl
                return;
            }
            window.location.href = this.state.protocolUrl;
            window.setTimeout(() => {
                window.location.href = this.state.downiOSUrl;//打开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);
    }
    
    norOpen = () => {
        Alert.hint('暂未开通,敬请期待', 1500);
    }

    render() {
        return (
            <div className="down_app_box">        
                <button onClick={this.handleNextPage} className="down-btn">欢迎下载刷脸支付APP</button>
            </div>
        );
    }
}

相关文章

网友评论

      本文标题:判断Android,iOS,微信浏览器

      本文链接:https://www.haomeiwen.com/subject/ifnfqctx.html