他山之石可以攻玉。
参考方案：
1.https://www.jianshu.com/p/575c6184bbe9
2.https://www.cnblogs.com/chaoyuehedy/p/9004224.html
解决公众号跳转APP的问题，其实要先搞清楚各个平台之间的关系，这里面涉及到三个端，微信公众号，h5,和APP，所以这三个端的任务是：
1.公众号的话要按照微信那边来弄，只能提供网址，这个网址也就是h5页面的网址，也就是下载或者跳转页面（或者说叫蒙板）。
2.这个蒙板也就是h5页面，在这个页面写逻辑，做判断，判断是android还是ios，能否唤起APP，如果不能显示下载的按钮给他下载。
3.APP端，这个相对简单，h5页面唤起，需要知道唤起哪个APP，也就是APP的scheme，这个scheme也就是用来唤起的名字。
下面给出具体代码：
1.公众号：略
2.h5页面：
import { LockOutlined, MailOutlined } from '@ant-design/icons';
import { Button, Divider, message, Row, Col, Result, Image, Alert } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { getWeChatMsgCode, injectOpenId } from '@/services/h5Auth';
import './index.less';
import androidBack from '@/assets/androidBack.png';
import rightArrow from '@/assets/rightArrow.png';
import { Component } from 'react';
const baseScheme = 'taobao://';
// 微信 H5 下载
class WeChatDown extends Component {
constructor(props) {
super(props);
}
state = {
buttonShow: false,
};
componentDidMount() {
this.isWeixinBrowser();
let BrowserStatus = this.isWeixinBrowser();
console.log('是否为微信内置浏览器：' + BrowserStatus);
if (BrowserStatus === true) {
this.setState({
buttonShow: false,
});
} else if (BrowserStatus === false) {
this.setState({
buttonShow: true,
});
this.openApp();
}
}
// 创建iframe
createIframe = () => {
let iframe;
this.createScheme();
return function () {
if (iframe) {
return iframe;
} else {
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
}
};
};
// 定义App的scheme 测试使用淘宝的schemeconst baseScheme = "taobao://";
createScheme = (options, isLink) => {
let urlScheme = baseScheme;
for (let item in options) {
urlScheme = urlScheme + item + '=' + encodeURIComponent(options[item]) + '&';
}
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return encodeURIComponent(urlScheme);
};
openApp = () => {
window.location.href = 'smarttransport://';
};
downLoadApp = () => {
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient';
}
if (isIOS) {
message.info('IOS版本尚未完成开发，敬请期待', 0);
}
};
isWeixinBrowser() {
var agent = navigator.userAgent.toLowerCase();
if (agent.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
}
render() {
return (
{this.state.buttonShow ? (
className='downLoadFun' onClick={() => { this.downLoadApp(); }} >