H5打开APP或小程序

UserGuan

已于 2022-05-13 21:10:55 修改

阅读量671

点赞数

分类专栏：前端类文章标签： javascript

于 2022-05-13 20:12:47 首次发布

本文链接：https://blog.csdn.net/AdminGuan/article/details/124759074

版权

前端类专栏收录该内容

50 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>H5打开APP或小程序</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
      .content_box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .content_box div {
        width: 220px;
        text-align: center;
        padding: 10px 0;
        margin-top: 40px;
        border-radius: 5px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="content_box">
      <div id="openApp">打开APP</div>
      <div id="openApplet">打开小程序</div>
    </div>
    <script type="text/javascript">
      /* 打开APP */
      $('#openApp').click(function() {
        const u = navigator.userAgent; // 用户设备
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android终端
        const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        let schemeURL = ''; // scheme协议(地址由安卓端跟ios端提供)
        let downloadURL = ''; // 软件下载地址
        // 安卓操作系统
        if (isAndroid) {
          console.log('安卓操作系统');
          schemeURL = 'XXX'; // 安卓app的scheme协议
          downloadURL = "XXX"; // 应用宝下载地址
        }
        // 苹果操作系统
        if (isIOS) {
          console.log('苹果操作系统');
          schemeURL = 'XXX'; // ios的scheme协议
          downloadURL = "XXX"; // App store下载地址
        }
        window.location.href = schemeURL; // scheme协议
        setTimeout(function() {
          const hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||
            window.document.webkitHidden;
          if (typeof hidden == "undefined" || hidden == false) {
            window.location.href = downloadURL; // 软件下载地址
          }
        }, 2500);
      });
      /* 打开小程序 */
      $('#openApplet').click(function() {
        const ua = navigator.userAgent.toLowerCase(); // 获取判断用的对象
        // 在新浪微博客户端打开
        if (ua.match(/WeiBo/i) == "weibo") {
          console.log('在新浪微博客户端打开');
          // username：微信小程序的原始ID；path：微信小程序的页面地址，可以拼接参数
          window.location.href = `sinaweibo://wbdiversion?username=${"username"}&path=${"path"}`;
        }
        // 其他客户端打开
        else {
          console.log('其他客户端打开');
          // 格式通常为：weixin://dl/business/?t=URL Scheme值(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html)
          window.location.href = `weixin://dl/business/?t=*******`;
        }
      })
    </script>
  </body>
</html>

UserGuan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5打开APP或小程序

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>H5打开APP或小程序</title> <script src="http://libs.baidu.com/jque.
复制链接

扫一扫