Hintergrund: Manchmal stößt man auf diese Art von Aufforderung, nämlich den QR-Code zu scannen, um die App zu öffnen. Wenn der Benutzer diese App nicht hat, wird er zum Springen aufgefordert; oder der Benutzer installiert sie zum ersten Mal und springt zum App Store, indem Sie den QR-Code scannen oder die APK direkt herunterladen.
Es ist nicht möglich, die App direkt von der Webseite aus aufzurufen, und es müssen zunächst einige Konfigurationen auf der nativen Seite vorgenommen werden. Darüber hinaus sind die Aufrufmethoden von Android und Apple unterschiedlich.
1. Methode 1, direkter und einheitlicher Sprung zum Anwendungsmarkt
Auf der h5-Seite wird unabhängig davon, ob der Benutzer die App installiert hat oder nicht, direkt zum App Store gesprungen, sodass der Benutzer die App aus dem App Store öffnen kann. Diese Methode ist relativ einfach und direkt, und das WeChat-Scannen funktioniert auch erfordern keine besondere Bearbeitung.
Idee : Stellen Sie zunächst direkt fest, ob sich das Gerät auf der Android- oder iOS-Seite befindet, und weisen Sie dann der Klickschaltfläche den entsprechenden App-Store-Download-Link zu. Beim Öffnen der h5-Seite auf WeChat ist keine zusätzliche Verarbeitung erforderlich. Vor dem Sprung öffnet das System standardmäßig ein Dialogfeld, in dem Sie gefragt werden, ob gesprungen werden soll.
Implementierung:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
body{
padding-top: 30px;
}
.open-app {
margin: 30px;
border-radius: 5px;
padding: 10px 20px;
border: 1px solid #ccc;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<a class="open-app">click me to store</a>
<script type="text/javascript">
var iosLinkUrl = "http://apps.apple.com/cn/app/id387682726" // 淘宝 app store 下载地址
var androidLinkurl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient" //(找不到淘宝应用宝地址，这里以lucky coffee为例)
var u = navigator.userAgent, isAndroid, isIOS
window.onload = function() {
init()
}
function init() {
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var link = isIOS ? iosLinkUrl : androidLinkurl
$('a').attr('href', link)
}
</script>
</body>
</html>
2. Methode 2
Auf der h5-Seite klickt der Benutzer auf die Schaltfläche, um die App zu öffnen. Wenn die App bereits auf dem Mobiltelefon des Benutzers installiert ist, wird die App direkt geöffnet. Andernfalls wird der Benutzer zum Anwendungsmarkt weitergeleitet oder lädt die APK herunter. Diese Art der Bedienung bietet ein besseres Erlebnis und ist für Benutzer bequemer zu bedienen und zu verwenden. Darüber hinaus können Sie bei geschäftlichen Anforderungen zur angegebenen Seite der App springen und Parameter übergeben.
Idee : Um die App auf der h5-Seite zu aktivieren, müssen Sie das Schemaprotokoll (bereitgestellt vom App-Partner) verwenden . Das Schemaprotokoll funktioniert jedoch nicht im WeChat-Browser und manchmal auch nicht, wenn Sie einige Vorgänge in WeChat öffnen Der Grund dafür ist, dass Sie zur App springen müssen und zum Öffnen im Browser aufgefordert werden.
Daher muss zunächst beurteilt werden, ob es sich um einen WeChat-Browser handelt. Wenn es sich um einen WeChat-Browser handelt, werden Sie aufgefordert, den Browser zu öffnen.
Implementierung:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
body{
padding-top: 30px;
}
.open-app {
margin: 30px;
border-radius: 5px;
padding: 10px 20px;
border: 1px solid #ccc;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<a class="open-app">click me to app</a>
<script type="text/javascript">
$('a').click(function() {
var u = navigator.userAgent;
var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// 微信内
if(isWeixin) {
alert('请在浏览器上打开')
} else {
//android端
if (isAndroid) {
//安卓app的scheme协议
window.location.href = 'taobao://';
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
//应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
}
}, 2000);
}
//ios端
if (isIOS) {
//ios的scheme协议
window.location.href = 'taobao://'
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 = "http://itunes.apple.com/app/id387682726";
}
}, 2000);
}
}
});
</script>
</body>
</html>
Wenn das Schema erkannt werden kann, springen Sie zum Protokoll Taobao, dh öffnen Sie die App.
Wenn Taobao nach 2 Sekunden nicht aktiviert wurde, wird davon ausgegangen, dass Taobao nicht auf dem Gerät installiert ist, dh zur Anwendung springen Markt.
Hier können Sie wählen, ob Sie das Fenster direkt öffnen möchten, um den Link zu öffnen, oder Sie können iframe框架es zum , aber ios9 blockiert das Iframe-Tag.
Mit Hilfe von iframe kann eine Seite auf der Originalseite geöffnet werden:
Wenn Sie einen Iframe verwenden, können Sie den Download durchführen, ohne die Seite erneut zu öffnen, und es hat keine Auswirkungen auf das Layout der Originalseite.
Schlüsselcode:
var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
document.getElementsByTagName('body')[0].appendChild(iframe);
Die Aktion des Formulars kann auch eine Anfrage stellen:
var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var form = document.createElement('form');
form.action = src;
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();
Ergänzung: Die entsprechende ergänzende Einführung in die Schema-
URL-Scheme-Methode ruft Aktivitäts- oder App
-URL-Schema hervor. Es handelt sich um ein internes Seitensprungprotokoll, über das es bequemer ist, zu einer bestimmten Seite der App zu springen.
scheme应用场景：(Derzeit werden 1, 2, 5 in einer Vielzahl von Szenarien verwendet)
- Verwenden Sie über das Applet das Schemaprotokoll, um die native App zu öffnen.
- Klicken Sie auf den Ankerpunkt auf der H5-Seite. Die App springt entsprechend dem spezifischen Sprungpfad des Ankerpunkts zu einer bestimmten Seite.
- Die App-Seite empfängt die vom Server gesendete Push-Benachrichtigungsleistennachricht und springt entsprechend dem Klick-Sprungpfad der Nachricht zur entsprechenden Seite.
- Die App springt entsprechend der URL zu einer anderen von der App angegebenen Seite.
- Öffnen Sie die native App über die URL in der Kurznachricht.
Fügen Sie eine detaillierte Einführung in das Scheme-Protokoll bei (https://segmentfault.com/a/1190000015880556).
3. Konkrete Anwendungsbeispiele
Beurteilen Sie zunächst, ob es von WeChat gescannt wird. Wenn ja, fordern Sie den Browser zum Öffnen auf. Beurteilen Sie nach dem Zugriff über den Browser die Quelle des Geräts. Wenn es sich um Android handelt, öffnen Sie eine neue Seite über iframe und laden Sie die APK herunter ; Wenn es sich um iOS handelt, öffnet die Übergabe von location.href eine neue Seite und springt zum App Store.
Die relevanten Bilder sind wie folgt:
spezifische Implementierung:
<!DOCTYPE html>
<html style="font-size: 80.5%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="no" name="apple-mobile-web-app-capable">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="telephone=no" name="format-detection">
<title>下载 - 智能摄像机</title>
<link rel="stylesheet" type="text/css" href="http://publicfiles.xxx.com/yi_files/all.min.dc422677.css" />
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?c80f110b564dd5a35f5c9d47bfe0520b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<style>
.a_down{
display: block;
max-width: 65%;
margin: 2rem auto .5rem;
font-size: 2.4rem;
line-height: 2.4rem;
border: 1px solid #E73861;
color: #E73861;
padding: 1rem 0;
border-radius: .5rem;
text-align: center;
}
#tips{
display: none;
color:#ccc;
text-align: center;
}
</style>
</head>
<body style="background: #ffffff; width:100%;height:100%;">
<div class="wechat">
<img class="fc" src="http://publicfiles.xxx.com/yi_files/wechat-notice.png" />
</div>
<div id="layout">
<h2 class="t_title" style="font-family: 'FZLTXHK','Microsoft Yahei';font-weight: initial;color:#00BAAD;font-size: 2.2rem;">智能摄像机</h2>
<h4 class="t_des" style="font-family: 'FZLTXHK','Microsoft Yahei';color:#4C4C4C;font-weight: 200;">会看会听会思考 引领智能新生活</h4>
<img style="margin: 3rem auto;max-width: 100%;margin-left:-3%;" src="http://publicfiles.xxx.com/yi_files/yi_02_3.png" />
<a class="a_down" style=" background-color: #00BAAD; margin-top: -10%;border: 1px solid #00BAAD;color: #00BAAD; font-size: 1.4rem;
line-height: 1.4rem; border-radius: 100px;max-width: 80%;" href="javascript:;"><font style="color:#ffffff">智能下载</font></a>
<p id="tips" >正在下载，请稍等！</p>
</div>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-60717157-3', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="http://publicfiles.xxx.com/yi_files/zepto.min.1abd55c5.js"></script>
<script type="text/javascript" src="assets/js/cam.min.5ab037100.js"></script>
</body>
</html>
Unter diesen ist die Datei cam.min.5ab037100.js der Kerncode zur Realisierung des Sprungs , wie folgt:
/*
* 智能机浏览器版本信息:
*
*/
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1,
weibo: u.indexOf('weibo') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.android) {
console.log('增加按钮');
}
if (browser.versions.weixin || browser.versions.weibo) {
$('.wechat').addClass('wechat_active');
}
if (!browser.versions.ios) {
$('.a_down_url').addClass('android_active');
}
function uuid(){
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4";
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
}
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
$('.a_down').on('click', function() {
console.log('下载');
try {
$('#tips').css("display:block")
} catch (e) {
};
var uuids = getCookie('cid');
if(null!=uuids && uuids!=""){
uuids = uuids;
}else{
uuids = uuid();
setCookie('cid',uuids);
}
var datelong = new Date().getTime();
if (browser.versions.android) {
$.ajax({
url:'https://log.xxx.com/info.gif?cid='+uuids+'&p=android&data={"data":[{"t":"e","c":"AppInsDownload","ts":'+datelong+',"result":"true"}]}',
type:'get',
success:function(data){
console.log('成功:'+data);
}
})
try {
ga('send', 'event', '家庭相机客户端下载', 'click', '家庭相机客户端下载_Android', 1);
} catch (e) {
};
try {
_hmt.push(['_trackEvent', '家庭相机客户端下载', 'click', '家庭相机客户端下载_Android', '1']);
} catch (e) {
}
var startTime,
endTime;
setTimeout(function() {
var d = navigator.userAgent.match(/Chrome\/(\d+)/);
try {
startTime = (new Date()).getTime()
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.src = 'https://publicfiles.xxx.com/app/yicamera_china_release.apk' //'market://details?id=com.ants360.yicamera'; 安卓下载apk地址
document.body.appendChild(iframe);
// endTime = (new Date()).getTime();
} catch (e) {
}
}, 0)
} else if (browser.versions.ios) {
$.ajax({
url:'https://log.xxx.com/info.gif?cid='+uuids+'&p=ios&data={"data":[{"t":"e","c":"AppInsDownload","ts":'+datelong+',"result":"true"}]}',
type:'get',
success:function(data){
console.log('成功:'+data);
}
})
try {
ga('send', 'event', '家庭相机客户端下载', 'click', '家庭相机客户端下载_iOS', 1);
} catch (e) {
};
try {
_hmt.push(['_trackEvent', '家庭相机客户端下载', 'click', '家庭相机客户端下载_iOS', '1']);
} catch (e) {
}
setTimeout(function() {
location.href = 'https://itunes.apple.com/cn/app/xxx-zhi-neng-she-xiang-ji/id931168730?l=zh&ls=1&mt=8'; //ios地址
}, 250)
} else {
$.ajax({
url:'https://log.xxx.com/info.gif?cid='+uuids+'&p=android&data={"data":[{"t":"e","c":"AppInsDownload","ts":'+datelong+',"result":"true"}]}',
type:'get',
success:function(data){
console.log('成功:'+data);
}
})
try {
ga('send', 'event', '家庭相机客户端下载', 'click', '家庭相机客户端下载_其他', 1);
} catch (e) {
};
try {
_hmt.push(['_trackEvent', '家庭相机客户端下载', 'click', '家庭相机客户端下载_其他', '1']);
} catch (e) {
}
setTimeout(function() {
location.href = 'http://app.mi.com/detail/xxx'; //小米应用商店
}, 250)
}
})
$('.a_down_url').on('click', function() {
try {
ga('send', 'event', '家庭相机客户端下载', 'click', '家庭相机客户端下载_Android_APK_附加URL', 1);
} catch (e) {
};
try {
_hmt.push(['_trackEvent', '家庭相机客户端下载', 'click', '家庭相机客户端下载_Android_APK_附加URL', '1']);
} catch (e) {
}
setTimeout(function() {
location.href = 'http://app.mi.com/detail/xxx'; //小米应用商店
}, 250)
})
console.log(1024)
Referenzblog:
Die H5-Seite ruft die angegebene App auf oder springt zum Anwendungsmarkt (scannen Sie den QR-Code, um die APP direkt herunterzuladen) https://blog.csdn.net/weixin_43085797/article/details/105137059
Die H5-Seite realisiert drei Schritte zum Herunterladen von Dateien (apk, txt usw.) Zwei Möglichkeiten https://blog.csdn.net/weixin_34221112/article/details/88768839
h5 Scannen Sie den QR-Code, um die App zu öffnen, und klicken Sie, um die Funktion herunterzuladen, um die
Verwendung von https zu realisieren:/ /www.cnblogs.com/sxz2008/p/8245431.html QR-Code scannen, um die App zu öffnen http://www.javashuo.com/article/p-oiyumdpk-bm.html
h5 QR-Code scannen, um die App zu öffnen und zum Herunterladen klicken http://www.javashuo.com/article/ p-twxyspeb-z.html
Details zum Schemaprotokoll https://segmentfault.com/a/1190000015880556