H5 iPhone调用scheme唤起APP+mate商店下载引导banner+按钮唤起APP

最新推荐文章于 2024-03-06 16:43:47 发布

原创最新推荐文章于 2024-03-06 16:43:47 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了H5在iPhone上唤起APP的方法，包括通过调用scheme唤起，以及利用mate商店引导banner和按钮来唤起APP，为相关开发提供了思路。

<!DOCTYPE html>
<html>
<head>
        <title>首页 schames自动打开 iOS APP 网页顶端苹果商店引导banner </title>
        <style type="text/css">
            .back{
                /* 设置起始坐标 */
                position:absolute; top:10px;left:20px;float:left;
            }
        </style>
         <!-- 不需要苹果banner的 meta 设置显示为中文 -->
        <meta charset="UTF-8">
        <!-- 
            meta 苹果banner 标签 好像只有safer浏览器会显示 
            已安装会显示 打开 点击打开该APP
            未安装会提示 显示 点击跳到苹果商店 
            三个参数说明
            app-id =苹果商店的iTunes链接里面找以id+数字结构 去掉id后的纯数字 
            affiliate-data = ios项目中的 Bundle identifier
            app-argument = ios项目中添加的 schemes 
             -->
        <meta charset="UTF-8" name="apple-itunes-app" content="app-id=506208272, affiliate-data=yourBundleidentifier, app-argument=iOSschemes://">
       
        <!-- script 添加点击事件 或者逻辑判断 -->
        <script type="text/javascript">
       
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) 
    {
         // iOS 
        var loadDateTime = new Date();
        window.setTimeout(function()
         {
        var timeOutDateTime = new Date();
          if (timeOutDateTime - loadDateTime < 5000) 
         {
          window.location = "iOSschemes://";
         } 
         else
         {
          window.close();
         }
        },
     25);
 } 
 else if (navigator.userAgent.match(/android/i)) 
  {
    //安卓
  var state = null;
  try {
   // state = window.open("ksbd://", '_blank');
  } catch(e) {}

  if (state) {
   // window.close();
  } else {
   // window.location = "要跳转的页面URL";
  }
 }
</script> 
    </head>
    <body>
        <div class="back">
        <p>
            <font size="20px">
            <!-- 首页<br> -->
            <button type="submit" id="btn" onclick="btn()">按钮</button><br>
            <button type="submit" id="btn2">打开APP</button><br>
              <!-- <input  type="image" src="/image/11.png"/> -->
            </font>
              <!-- script 添加点击事件 或者逻辑判断 -->
            <script>
            // 获取button点击事件 方式一
            function btn(){
                // alert("提交点击事件");
              window.location.href = "iOSschemes://"; // 跳转链接
    
            }

            // 获取button点击事件方式二
            document.getElementById("btn2").onclick = function(){
                 // alert("提交新点击事件2");
                  window.location.href = "iOSschemes://";  // 跳转链接
            };
        </script>
        </p>
        </div>

    </body>
</html>