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>
);
}
}
网友评论