一,js代码:
<html> <head> <meta charset="utf-8"/> <title>测试</title> </head> <body style="padding:0px;margin: 0px;"> <!--background--> <div style="width:100%;height: 100vh;background: #000000;opacity: 0.5;position: fixed;"></div> <div style="width:100%;height: 100vh;position: relative;"> <img id="arrow" src="wx_arrow.png" style="position: absolute;right:40px;top:20px;" /> <div id="msg" style="left:10%;color:#ffffff;width:80%;position: absolute;top:36%;font-size: 3rem;"> 点击右上角按钮,选择「在浏览器打开」,会自动开启app下载 </div> </div> <script> //全局变量 let globalApk = 'http://static.lhdtest.com/apk/lhdtest_v1.2.3_2022121211_general_release.apk'; //页面加载完成,如果是微信浏览器,提示跳转到手机浏览器 //如果不是微信浏览器,则开始下载 window.onload=function () { let isWx = isWeixin(); if (isWx == true) { console.log('当前是微信浏览器'); document.getElementById('arrow').style.display = ""; document.getElementById('msg').innerHTML = "点击右上角按钮,选择「在浏览器打开」,会自动开启app下载"; } else { console.log('当前非微信浏览器,跳转到apk'); document.getElementById('arrow').style.display = "none"; document.getElementById('msg').innerHTML = "如下载未自动启动,请点击<a style='text-decoration:none;' href='"+globalApk+"'>这里</a>"; window.location.href = globalApk; } } //判断是否微信浏览器 function isWeixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } } </script> </body> </html>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: [email protected]
二,测试效果
非微信浏览器:
微信浏览器: