在微信里面,是不能通過應用寶以外的方式去直接下載app的,但是卻可以通過跳轉到瀏覽器去下載app,因此如果剛好各位公司有剛剛上線的app,來不及放到微信應用寶那里,可以試試這種辦法。
實現思路:
1.在頁面加載的時候去判斷是否在微信瀏覽器里面,如果是就彈出模態框圖片提示用戶跳去瀏覽器下載
var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
// 彈出模態框提示用戶
document.getElementById('download-modal').style.visibility = "visible";
}
效果圖:
圖片參考:https://github.com/kujian/weixinTip?utm_source=caibaojian.com
2.判斷是否哪種系統(android,ios)
// 判斷系統客戶端
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isAndroid == true){
// alert('Android!');
window.location = 'android.apk';
}
else {
if(isiOS == true){
// alert('ios!');
window.location = 'https://itunes.apple.com/';
}else{
alert('請在手機端打開');
}
}
其實都是東拼西湊的代碼...最后附上代碼
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript"> function down(){ // 判斷是否微信瀏覽器 var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象 if (ua.match(/MicroMessenger/i) == "micromessenger") { // 彈出模態框提示用戶 document.getElementById('download-modal').style.visibility = "visible"; }else{ // 判斷系統客戶端 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 if(isAndroid == true){ // alert('Android!'); window.location = 'litme.apk'; } else { if(isiOS == true){ // alert('ios!'); window.location = 'https://itunes.apple.com/'; }else{ alert('請在手機端打開'); } } } } function closeModal(){ var modal = document.getElementById('download-modal'); modal.style.visibility = "hidden"; } </script> <style type="text/css"> .download-modal{ visibility: hidden; width: 100%; height: 100%; opacity: 0.5; position: absolute; text-align: center; background-color:rgb(30,30,30); top: 0; left: 0; z-index: 9999; } .download-modal-mess{ } #jump-to-browser{ width: 90%; } </style> </head> <body onload="down()"> <div id="download-modal" class="download-modal" onclick="closeModal()"> <div class="download-modal-mess"> <!-- 提示跳轉用戶的圖片 --> <img src="./img/live_weixin.png" id="jump-to-browser"> </div> </div> </body> </html>