使用场景
在微信上进行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代码,文档上也有
<!-- 以下为openinstall集成代码,建议在html文档中尽量靠前放置,加快初始化过程 -->
<!-- 强烈建议直接引用下面的cdn加速链接,以得到最及时的更新,我们将持续跟踪各种主流浏览器的变化,提供最好的服务;不推荐将此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,分别调用各自接口。