现在开发app的公司，特别是app里面含活动页比较多的。一般都是首选嵌入h5页面来完成，不然谁会三天两头的去发包啊。活动页面大部分都是要通过h5分享出去，让其他人去下载你的app或者打开你的app参与活动。
今天分享两种能够在h5页面唤起app的方法
1、第一种通过直接跳转。其他两种iframe跳转跟a标签跳转我就不讲了，都是大同小异。
普通的方法有个弊端就是兼容性不一定有那么好，现在市面上浏览器的版本比较多。还有就是有些手机3秒内可能唤不起来
let uri = 'geebook:///openpage/main' /***打开app的地址，安卓跟ios同事提供***/
var _clickTime = new Date().getTime();
window.location.href = uri;
//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var _count = 0,
intHandle;
intHandle = setInterval(function() {
_count++;
var elsTime = new Date().getTime() - _clickTime;
if (_count >= 100 || elsTime > 3000) {
clearInterval(intHandle);
//检查app是否打开
if (document.hidden || document.webkitHidden) {
// 打开了
} else {
window.location.href = "/csg8.4.2_other.apk"; //如果3秒内没有唤醒说明没有下载这个app,跳转到下载链接
}
}
}, 20);
2、通过openinstall唤起app这个兼容性比较好，不过这是需要花钱的。这是官方文档地址里面有接入指南，可以按照一步一步的做，不会的可以留言。我就直接上代码了, 这里有三种运用场景，代码里看注释
（1）、场景一，整个页面只有一个按钮唤起app
<template>
<div>
//场景一是整个页面只有一个按钮唤起app
<div id="downloadButtonMore">点击我唤起app</div>
</div>
</template>
<script>
export default {
mounted() {
var that = this
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '///'; //这里是openinstall的js
s.addEventListener('load', () => {
var data = OpenInstall.parseUrlParams(); //中提供的工具函数，解析url中的所有查询参数
data.uri = `geebook:///openpage/` //这个唤起地址是需要安卓跟ios提供的
new OpenInstall({
/*appKey必选参数，openinstall平台为每个应用分配的ID,这里是我随便写的*/
appKey: 'cfkq34xxxxxx',
/*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
//apkFileName : '-v2.2.',
/*可选参数，是否优先考虑拉起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;
var button = document.getElementById("downloadButtonMore")
button.style.visibility = "visible";
/*在app已安装的情况尝试拉起app*/
m.schemeWakeup({
data: data,
channelCode: "test-channelcode"
});
/*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/
button.onclick = function() {
console.log('点击了')
m.wakeupOrInstall({
data: data,
channelCode: "test-channelcode"
});
return false;
}
}
}, data);
}, false)
document.head.appendChild(s);
},
}
</script>
（2）、场景二，整个页面有多处按钮获取循环的按钮唤起app，通过给自定义的元素添加点击事件唤起，（在微信浏览器拿不到，其他浏览器都是正常）。接下来的第三种场景是最方便的，也是最好的
<template>
<div>
//场景二是整个页面很多地方唤起app
//自定义data-call
<div data-call>点击我唤起app</div>
<div v-for="(item, index) in 10" :key="index" data-call>
点击我也要唤起app
</div>
</div>
</template>
<script>
export default {
mounted() {
var that = this
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '///'; //这里是openinstall的js
s.addEventListener('load', () => {
var data = OpenInstall.parseUrlParams(); //中提供的工具函数，解析url中的所有查询参数
data.uri = `geebook:///openpage/` //这个唤起地址是需要安卓跟ios提供的
new OpenInstall({
/*appKey必选参数，openinstall平台为每个应用分配的ID,这里是我随便写的*/
appKey: 'cfkq34xxxxxx',
/*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
//apkFileName : '-v2.2.',
/*可选参数，是否优先考虑拉起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;
/*在app已安装的情况尝试拉起app*/
m.schemeWakeup({
data: data,
channelCode: "test-channelcode"
});
document.body.addEventListener("click", (e) => {
const arr = e.path;
if (arr) {
for (let i = 0; i < arr.length; i += 1) {
const item = arr[i];
if (item.dataset?.call) {
m.wakeupOrInstall({
data: data,
channelCode: "test-channelcode"
});
break;
}
}
}
})
}
}, data);
}, false)
document.head.appendChild(s);
}
}
</script>
（3）、场景三，通过把唤起的函数挂在window上。需要用的地方直接通过点击事件调用
<template>
<div>
//场景三是整个页面很多地方唤起app
<div @click="aa">点击我唤起app</div>
<div v-for="(item, index) in 10" :key="index" @click="bb">
点击我也要唤起app
</div>
</div>
</template>
<script>
export default {
methods: {
aa(){
window.wakeupOrInstall()
},
bb(){
window.wakeupOrInstall()
}
},
mounted() {
var that = this
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = '///'; //这里是openinstall的js
s.addEventListener('load', () => {
var data = OpenInstall.parseUrlParams(); //中提供的工具函数，解析url中的所有查询参数
data.uri = `geebook:///openpage/` //这个唤起地址是需要安卓跟ios提供的
new OpenInstall({
/*appKey必选参数，openinstall平台为每个应用分配的ID,这里是我随便写的*/
appKey: 'cfkq34xxxxxx',
/*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*/
//apkFileName : '-v2.2.',
/*可选参数，是否优先考虑拉起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;
/*在app已安装的情况尝试拉起app*/
m.schemeWakeup({
data: data,
channelCode: "test-channelcode"
});
window.wakeupOrInstall = function(){
m.wakeupOrInstall({
data: data,
channelCode: "test-channelcode"
})
}
}
}, data);
}, false)
document.head.appendChild(s);
}
}
</script>