H5唤起app

最新推荐文章于 2022-09-08 14:55:22 发布

IF_YOU_Qian

最新推荐文章于 2022-09-08 14:55:22 发布

阅读量206

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/IF_YOU5849/article/details/115699205

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何通过H5页面实现点击按钮检查并唤起已安装的APP，若未安装则跳转至下载页面。针对iOS和Android设备，提供了不同的交互方式。在微信环境中，由于限制，只能提示用户复制链接到浏览器打开。同时，文章还提到了避免苹果设备动画闪白屏的解决方案。

摘要由CSDN通过智能技术生成

H5唤起app

前言：H5页面点击按钮，判断手机是否安装app，安装则与ios和Android沟通交互传值的方式，未安装则跳转app下载页；

1 . html代码片段

// 唤起app按钮
<a class="open-app down_app_btn_open">打开APP</a>

2 . js代码片段

$('.down_app_btn_open').on('click',function(){
	// app下载页
    var openUrl = '......';
    var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'),
        isAndroid = navigator.userAgent.match('Android'),
        isDesktop = !isiOS && !isAndroid;
        isWx = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
    if (isWx) {
    	//注意：微信内无法调起app,只能提示复制链接到浏览器打开
        $('.marking_open_app').fadeIn();           
    }else if (isiOS) {
	   //与ios交互
        ..............
    } else if (isAndroid) {
       //与安卓沟通好链接
        $('.down_app_btn_open').attr('href','.......?id='+dynamic_id);
        setTimeout(function () {
            window.location.href = openUrl;
        }, 5000);
    } else {
        window.location.href = openUrl;
    }
});

注

微信内无法调起app,只能提示复制链接到浏览器打开（样式如下）**

在这里插入图片描述

// 遮罩层
 <div class="marking_open_app">
      <img class="arrow_open_app" src="/images/arrow_open_app.png" alt="">
  </div>

小tips

解决苹果动画闪白屏问题**

   transform: translate3d(0, 0, 0);
  -o-transform:translate3d(0, 0, 0);
  -ms-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  -webkit-transform:translate3d(0, 0, 0);