背景:場合によっては、QR コードをスキャンしてアプリを開くというこの種の要求に遭遇することがあります。ユーザーがこのアプリを持っていない場合は、ジャンプするように求められます。または、ユーザーが初めてアプリをインストールする場合をクリックし、QR コードをスキャンして App Store にジャンプするか、apk を直接ダウンロードします。
Web ページからアプリを直接呼び出すことは不可能であり、最初にネイティブ側でいくつかの構成を行う必要があります。また、AndroidとAppleでは呼び出し方法が異なります。
1. 方法 1、アプリケーション市場への直接かつ統合されたジャンプ
h5 ページでは、ユーザーがアプリをインストールしているかどうかに関係なく、アプリ ストアに直接ジャンプし、ユーザーはアプリ ストアからアプリを開くことができます。この方法は比較的シンプルで直接的であり、WeChat スキャンは特別な加工は必要ありません。
アイデア: まず、デバイスが Android 側にあるのか、iOS 側にあるのかを直接決定し、クリック ボタンに対応するアプリ ストアのダウンロード リンクを割り当てます。WeChat で h5 ページを開くとき、追加の処理を行う必要はなく、ジャンプする前に、システムはデフォルトでジャンプするかどうかを尋ねるダイアログ ボックスをポップアップ表示します。
実装：
<!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.方法2
h5 ページで、ユーザーはボタンをクリックしてアプリを開きます。アプリがユーザーの携帯電話にすでにインストールされている場合、アプリは直接開きます。そうでない場合、ユーザーはアプリケーション マーケットに移動するか、apk をダウンロードします。このような操作は、ユーザーにとって操作性が向上し、操作や使用に便利であり、ビジネス ニーズの場合には、アプリの指定されたページにジャンプしてパラメーターを渡すこともできます。
アイデア: h5 ページでアプリを起動するには、スキーム プロトコル(アプリ側のパートナーによって提供される) を使用する必要がありますが、スキーム プロトコルは WeChat ブラウザーでは機能せず、WeChat で一部の操作を開いたときに機能しないことがあります。アプリにジャンプする必要があるため、ブラウザで開くように求められます。
したがって、まず WeChat ブラウザであるかどうかを判断する必要があり、WeChat ブラウザである場合は、ブラウザを開くように求められます。
実装：
<!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>
スキームが検出できた場合は、淘宝網のプロトコルにジャンプします。つまり、アプリを開きます。2
秒経っても淘宝網が起動しない場合は、淘宝網がデバイスにインストールされていないと見なされます。つまり、アプリにジャンプします。市場。
ここで、ウィンドウを直接開いてリンクを開くか、iframe框架それをが、ios9 は iframe タグをブロックします。
iframe を使用すると、元のページでページを開くことができます。
iframe を使用すると、ページを再度開かずにダウンロードを実現でき、元のページのレイアウトに影響を与えません。
キーコード：
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);
フォームのアクションでリクエストを行うこともできます。
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();
補足: 関連するスキームの補足説明
URL スキーム メソッドは、アクティビティまたはアプリ
URL スキームを呼び出します。これを使用すると、アプリの特定のページにジャンプするのがより便利になります。
scheme应用场景：(現在、1、2、5 が幅広いシナリオで使用されています)
- アプレットを通じて、スキーム プロトコルを使用してネイティブ アプリを開きます。
- H5 ページ上のアンカー ポイントをクリックすると、アプリはアンカー ポイントの特定のジャンプ パスに従って特定のページにジャンプします。
- アプリ側はサーバー側から送信されたプッシュ通知バーメッセージを受信し、メッセージのクリックジャンプパスに従って該当ページにジャンプします。
- アプリは URL に従って、アプリ指定の別のページにジャンプします。
- ショート メッセージ内の URL からネイティブ アプリを開きます。
Scheme プロトコルの詳細な概要を添付してください(https://segmentfault.com/a/1190000015880556)
3. 具体的な応用例
まず、WeChatによってスキャンされているかどうかを判断し、スキャンされている場合はブラウザを開くように促します。ブラウザ経由でアクセスした後、デバイスのソースを判断し、Androidの場合はiframe経由で新しいページを開き、APKをダウンロードします。 ; iosの場合、location.hrefを渡すと新しいページが開き、アプリストアにジャンプします。
関連する図は次のとおりです。
具体的な実装:
<!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>
このうち、 cam.min.5ab037100.js ファイルは、次のようなジャンプを実現するためのコアコードです。
/*
* 智能机浏览器版本信息:
*
*/
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)
参考ブログ：
H5 ページは、指定したアプリを呼び出すか、アプリケーション マーケットにジャンプします (QR コードをスキャンしてアプリを直接ダウンロードします) https://blog.csdn.net/weixin_43085797/article/details/105137059
H5 ページは、ファイルのダウンロードの 3 つのステップを実現します(apk、txt など) 2 つの方法https://blog.csdn.net/weixin_34221112/article/details/88768839
h5 QR コードをスキャンしてアプリを開き、クリックして機能をダウンロードしてhttps:/
の使用を実現します。 /www.cnblogs.com/sxz2008/p/8245431.html QR コードをスキャンしてアプリを開きますhttp://www.javashuo.com/article/p-oiyumdpk-bm.html
h5 QR コードをスキャンしてアプリを開き、クリックしてダウンロードしますhttp://www.javashuo.com/article/ p-twxyspeb-z.html
スキームプロトコルの詳細https://segmentfault.com/a/1190000015880556