微信自动打开外部浏览器下载apk文件

Love The Way You Lie 2021-11-27 05:44 899阅读 0赞

### 使用场景 ###

在微信上进行app推广的时候，常用的是应用宝等第三方平台链接下载，但是这种第三方平台需要下载平台才能安装app，从而导致部分没有下载第三方平台的用户流失，所以往往需要采用直接通过浏览器自动下载app，这样就能很方便的在微信中下载app

### 方案 ###

###### 方法1 ######

使用php下载文件的方法，通过header头输出文件

$file = 'app-release_21_jiagu_sign.apk';
    if (file_exists($file)) {
        header('application/vnd.android.package-archive');
        header('Content-Type: application/octet-stream');
        header('Content-Description: File Transfer');
        header('Content-Type: application/octet-stream');
        header('Content-Disposition: attachment; filename="'.basename($file).'"');
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($file));
        readfile($file);
        exit;
    }

这种方式兼容性不好，有很多手机无法正常运行

#### 方法2 ####

前端实现，思路同上，js判断微信环境，如果是微信环境，则从后端返回header信息：

header("Content-Disposition: attachment; filename=zklm.apk");
    header("Content-Type: application/vnd.ms-word;charset=utf-8");

然后通过iframe加载apk文件

let url = 'http://test.url'
     		document.getElementById('BtnClick').href = url;
            let iframe = document.createElement("iframe");
            iframe.style.display = "none";
            iframe.src = url;
            document.body.appendChild(iframe);

以上两种方式虽然可以实现自动调用浏览器下载apk，但是这种方式会使用qq浏览器，实际上是转发到腾讯服务去了，所以最终调用qq浏览器接口，需要下载qq浏览器，所以转化率并不好

### 方案3 ###

目前已经有技术手段实现自动调用手机浏览器下载app，这里没有源码，所以使用了第三方接口，openinstall  
首先注册oepninstall，并添加应用，根据文档，对应用进行sdk集成，集成完毕后即可使用js代码进行调用，这里展示最终调用的js代码，文档上也有

<script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script>
    <script type="text/javascript">
        //openinstall初始化时将与openinstall服务器交互，应尽可能早的调用
        /*web页面向app传递的json数据(json string/js Object)，应用被拉起或是首次安装时，通过相应的android/ios api可以获取此数据*/
        var data = OpenInstall.parseUrlParams();//openinstall.js中提供的工具函数，解析url中的所有查询参数
        new OpenInstall({
            /*appKey必选参数，openinstall平台为每个应用分配的ID*/
            appKey : "m1scgv",
            /*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
            //apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',
            /*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*/
            //preferWakeup:true,
            /*自定义遮罩的html*/
            //mask:function(){
            //  return "<div id='openinstall_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"
            //},
            /*openinstall初始化完成的回调函数，可选*/
            onready : function() {
                var m = this, button = document.getElementById("downloadButton");
                button.style.visibility = "visible";
    
                /*在app已安装的情况尝试拉起app*/
                m.schemeWakeup();
    			//直接调用
    			 m.wakeupOrInstall();
                    return false;
                /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*
                button.onclick = function() {
                    m.wakeupOrInstall();
                    return false;
                }
            }
        }, data);
    
    </script>

这种方式兼容性也相对好一些，同时也支持ios的集成，注意需要先判断设备类型，区分ios和android,分别调用各自接口。