移动端浏览器下载app适配方案

最新推荐文章于 2025-03-06 18:05:53 发布

Wendy__Wang

最新推荐文章于 2025-03-06 18:05:53 发布

阅读量591

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/hellowwj0715/article/details/118301543

本文介绍了一种通过检测用户设备类型来智能推送不同下载链接的方法。该方法能够根据用户使用的手机型号（如iPhone、华为Android手机等）及应用程序环境（如微信、钉钉），将用户导向适合的下载页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：本文内容为在移动端推送的下载按钮被点击时，针对不同手机款型推送合适的链接地址。

方案如下：

1、UI代码：

<div class="button" onclick="downloadApp()"></div>

2、JS代码：

      function downloadApp() {
        // 获取浏览器用户代理信息，用于判断浏览器内核、手机系统等
        var userAgent = navigator.userAgent;

        if (userAgent.match(/(iPhone|iPad|iPod)/gi)) {
          window.location.replace(
            // app store 下载访问地址
            "itms-apps://itunes.apple.com/cn/app/XXXXX"
          );
        } else if (userAgent.match(/Android/gi)) {
          if (
            navigator.userAgent.match(/Huawei/gi) &&
            !userAgent.match(/micromessenger|dingtalk/gi)
          ) {
            // 安卓手机端，非钉钉&微信 下载访问地址
            window.location.replace("market://details?id=XXXXXX");
          } else {
            // 安卓手机端 钉钉/微信 下载访问地址
            window.location.replace(
              /* 此处为 apk 包的访问地址  */
              "https://XXX.com/download/XXXX.apk
            );
          }
        } else {
          window.alert("请在手机浏览器中访问此页面");
        }
      }