教你如何在微信浏览器唤醒APP

￡神魔★判官ぃ 2022-06-07 11:27 245阅读 0赞

实现效果

如下图所示，在手机浏览器中访问南泥湾的手机版网站(wechat.nanniwan.com)，顶部会有一个广告图，点击这个广告图，如果手机上已经安装了App，则直接打开，如果没有安装，则开始下载，如果在微信公众号中，则跳转应用宝第三方平台跳转。

![Center][]

![Center 1][]

![Center 2][]

## 实现方式 ##

1.为[Android][]应用的启动Activity设置一个Schema，如下：

<data android:host="splash" android:scheme="cundong"/>
     
      
       1
      
     
      
       1

2.用户点击浏览器中的链接时，在动态创建一个不可见的iframe，并且让这个iframe去加载步骤1中的Schema，如下：

var ifr = document.createElement('iframe');
    ifr.src="cundong://splash"
     
      
       1
       2
      
     
      
       1
       2

3，如果在指定的时间内没有跳转成功，则当前页跳转到apk的下载地址（或下载页），如下：

window.location = download_url;

效果实现：

① HTML页面实现

<div class="open clean" id="appstore">
        <i class="fl delete"></i>
        <i class="repre fl"></i>
        <p class="fr opena" id="J-call-app" href="javascript:void();">打开APP</p>
        <input id="J-download-Adr" type="hidden" name="Adr" value="https://**nanniwan_Android.apk">
        <input id="J-download-IOS" type="hidden" name="IOS" value="https://itunes.apple.com/**">
    </div>

方法一：

(function(){
            var ua = navigator.userAgent.toLowerCase();
            var t;
            //config 配置文件 JS 传递 scheme  客户端进行匹配
            //scheme_IOS IOS端必要参数
            //scheme_Adr 安卓端必要参数
            //download_url_Adr download_url_IOS 下载地址  timeout 过期时间
            var config = {
            //scheme:必须
                  scheme_IOS: 'demo://',
                scheme_Adr: 'demo://start',
                download_url_Adr: document.getElementById('J-download-Adr').value,
                download_url_IOS: document.getElementById('J-download-IOS').value,
                timeout: 600
            };
            function openclient() {
                var startTime = Date.now();
                // 用户点击时，在动态创建一个iframe，并且让这个iframe去加载config中的Schema
                var ifr = document.createElement('iframe');
                // 端口判断 安卓或IOS
                ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
                ifr.style.display = 'none';
                document.body.appendChild(ifr);
                var t = setTimeout(function() {
                    var endTime = Date.now();
                    //指定的时间内没有跳转成功 当前页跳转到apk的下载地址
                    if ((endTime - startTime) < (config.timeout + 200)) {
                        //判断是安卓 还是IOS
                        if (/iphone|ipad|ipod/.test(ua)) {
                            window.location.href = config.download_url_IOS;
                        } else if (/android/.test(ua)) {
                            window.location.href = config.download_url_Adr;
                        }
                    } else {
                        window.close();
                    }
                }, config.timeout);
    
                window.onblur = function() {
                    clearTimeout(t);
                }
            }
            //点击事件  调用openclient方法
            window.addEventListener("DOMContentLoaded", function(){
                document.getElementById("J-call-app").addEventListener('click',openclient,true);
            }, true);
            window.addEventListener("DOMContentLoaded", function(){
                document.getElementById("J-call-app-a").addEventListener('click',openclient,true);
            }, true);
        })();

方法二：

// 点击打开APP 微信端跳转应用宝
    $('#We-call-app').click(function(){
        //判断iPhone|iPad|iPod|iOS
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
            window.location.href ="https://itunes.apple.com/cn/app/***";
        } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
            window.location.href ="http://app.qq.com/#id=detail&appid=***";
        } else {  // PC端
            window.location.href ="https://www.***.com";
        }
    });

安卓实现：

![Center 3][]

参考链接：http://blog.csdn.net/coslay/article/details/46889051

[Center]: /images/20220607/37430b35787e4471a6fd540511e60e39.png
[Center 1]: /images/20220607/3da29f245738443181b1104c53ff57a4.png
[Center 2]: /images/20220607/f8de4b628b4343b2bfc865c7e4b62335.png
[Android]: http://lib.csdn.net/base/android
[Center 3]: /images/20220607/6ef0c85256c94e5f96cbfec52174280a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 判断浏览器是在普通浏览器中还是微信浏览器中

uni-app判断 let status = navigator.userAgent.toLowerCase(); if (status.

左手的ㄟ右手/ 2023年01月16日 09:44/ 0 赞/ 247 阅读

相关手把手教你接入微信支付

随着微信小程序的发展，越来越多的移动端应用选择了微信产品作为媒介。无论是公众号开发还是小程序开发，微信支付永远都是绕不开的话题。由于微信支付涉及了很多场景，本文我们只学习如何在

快来打我*/ 2022年11月17日 10:22/ 0 赞/ 656 阅读

相关 web 唤醒android app,JS唤醒Android APP(包括在外部浏览器和WebView)

1.AndroiManifest.xml中配置请在App启动的第一个Activity的那个节点中加入 android:scheme="zhaojian"/> 例如我是以

亦凉/ 2022年10月17日 13:40/ 0 赞/ 178 阅读

相关教你如何在火狐浏览器下安装sqlitemanager组建

如何在火狐浏览器下安装sqlitemanager组建 (1)首先下载火狐浏览器，并且安装。 (2)打开火狐浏览器点击上面的工具，添加组建 (3)出现如

怼烎@/ 2022年08月26日 15:36/ 0 赞/ 251 阅读

相关教你如何在微信浏览器唤醒APP

实现效果如下图所示，在手机浏览器中访问南泥湾的手机版网站(wechat.nanniwan.com)，顶部会有一个广告图，点击这个广告图，如果手机上已经安装了App，则直接打

￡神魔★判官ぃ/ 2022年06月07日 11:27/ 0 赞/ 246 阅读

相关手机端唤醒APP 、js 微信分享

\唤醒APP var ifr = document.createElement("iframe"); ifr.src = 'xiao

桃扇骨/ 2022年05月25日 14:09/ 0 赞/ 185 阅读

相关教你如何做微信公众号引流！

有读者问了一个很宽泛的问题：公众号引流怎么做？引流的类型小编列了几种公众号引流类型： 1、为自己引流：以公众号本身的增粉为目的，对公众号进行引流。 2、为应用

悠悠/ 2022年05月12日 14:20/ 0 赞/ 249 阅读

相关解决方案：从微信,QQ唤醒app。

h5唤醒app,有两种方式,第一种就是设置简单的URLSchemes,另一种是使用Universal Links深度连接. 然而对于ios来说,第一种方法,我们在safari

╰半夏微凉°/ 2022年02月20日 00:48/ 0 赞/ 1056 阅读

相关手把手教你接入微信支付

随着微信小程序的发展，越来越多的移动端应用选择了微信产品做为媒介。无论是公众号开发还是小程序开发，微信支付永远都是绕不开的话题。由于微信支付涉及了很多场景，本文我们只学习如何在

Myth丶恋晨/ 2021年09月18日 06:26/ 0 赞/ 578 阅读

相关手把手教你接入微信支付

随着微信小程序的发展，越来越多的移动端应用选择了微信产品作为媒介。无论是公众号开发还是小程序开发，微信支付永远都是绕不开的话题。由于微信支付涉及了很多场景，本文我们只学习如何在

小鱼儿/ 2021年09月07日 06:58/ 0 赞/ 611 阅读