vue唤起原生app的方法

现在开发app的公司，特别是app里面含活动页比较多的。一般都是首选嵌入h5页面来完成，不然谁会三天两头的去发包啊。活动页面大部分都是要通过h5分享出去，让其他人去下载你的app或者打开你的app参与活动。
今天分享两种能够在h5页面唤起app的方法

1、第一种通过window.location.href直接跳转。其他两种iframe跳转跟a标签跳转我就不讲了，都是大同小异。
普通的方法有个弊端就是兼容性不一定有那么好，现在市面上浏览器的版本比较多。还有就是有些手机3秒内可能唤不起来

 let uri = 'geebook://com.cliff/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 = "https://download.elibr.cn/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 = thisconst s = document.createElement('script');s.type = 'text/javascript';s.src = '//res.cdn.openinstall.io/openinstall.js';  //这里是openinstall的jss.addEventListener('load', () => {var data = OpenInstall.parseUrlParams(); //openinstall.js中提供的工具函数，解析url中的所有查询参数data.uri = `geebook://com.cliff/openpage/` //这个唤起地址是需要安卓跟ios提供的new OpenInstall({/*appKey必选参数，openinstall平台为每个应用分配的ID,这里是我随便写的*/appKey: 'cfkq34xxxxxx',/*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*///apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',/*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*///preferWakeup:true,/*自定义遮罩的html*///mask:function(){//  return ""//},/*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，通过给自定义的元素添加点击事件唤起，（e.path在微信浏览器拿不到，其他浏览器都是正常）。接下来的第三种场景是最方便的，也是最好的

<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 = thisconst s = document.createElement('script');s.type = 'text/javascript';s.src = '//res.cdn.openinstall.io/openinstall.js';  //这里是openinstall的jss.addEventListener('load', () => {var data = OpenInstall.parseUrlParams(); //openinstall.js中提供的工具函数，解析url中的所有查询参数data.uri = `geebook://com.cliff/openpage/` //这个唤起地址是需要安卓跟ios提供的new OpenInstall({/*appKey必选参数，openinstall平台为每个应用分配的ID,这里是我随便写的*/appKey: 'cfkq34xxxxxx',/*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*///apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',/*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*///preferWakeup:true,/*自定义遮罩的html*///mask:function(){//  return ""//},/*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>

（2）、场景三，通过把唤起的函数挂在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 = thisconst s = document.createElement('script');s.type = 'text/javascript';s.src = '//res.cdn.openinstall.io/openinstall.js';  //这里是openinstall的jss.addEventListener('load', () => {var data = OpenInstall.parseUrlParams(); //openinstall.js中提供的工具函数，解析url中的所有查询参数data.uri = `geebook://com.cliff/openpage/` //这个唤起地址是需要安卓跟ios提供的new OpenInstall({/*appKey必选参数，openinstall平台为每个应用分配的ID,这里是我随便写的*/appKey: 'cfkq34xxxxxx',/*可选参数，自定义android平台的apk下载文件名；个别andriod浏览器下载时，中文文件名显示乱码，请慎用中文文件名！*///apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',/*可选参数，是否优先考虑拉起app，以牺牲下载体验为代价*///preferWakeup:true,/*自定义遮罩的html*///mask:function(){//  return ""//},/*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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！