Html5内唤醒百度、高德APP的实现示例
前几天，联合黑卡反馈了一个需求，需要在H5中打开百度APP或者是高德APP，于是我在网上查了相关文档，下面放上链接： 1.高德地图 2.百度地图
具体思路就是点击选择地图的时候，先去请求APP链接，800毫秒后无响应，再跳转至H5链接。这样的做法有一点不好就是不管跳不跳APP，都会跳到H5的链接。有好的想法可以评论一下。
下面放相关代码：
function ToggleAppAndH5( AppUrl , AppCallback = () => {}){ // 先走APP const ifr = document.createElement('iframe'); ifr.src = AppUrl; ifr.style.display = 'none'; document.body.appendChild(ifr); setTimeout(function(){ document.body.removeChild(ifr); }, 3000); // 800毫秒后调用H5链接 let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); window.onblur = function () { clearInterval(timer); }; } function Callback(){ // 这里放相关H5链接 if (mapType === 'baidu') { frameDom.attr('src', "http://imgbuyun.weixiu-service.com/up79/202309/p1hfxbdsm05.html curLat "," curLng "|name:" currAddr "&destination=latlng:" elat "," elng "|name:" eaddr "®ion=" cityName "&mode=driving&output=html&src=com.youbei.chefu"); } else if (mapType === 'amap') { frameDom.attr('src', "http://imgbuyun.weixiu-service.com/up79/202309/vcca3xgspph curLng "," curLat "&from[name]=" currAddr "&to[lnglat]=" elng "," elat "&to[name]=" eaddr "&src=com.youbei.chefu"); } } const u = navigator.userAgent; const isiOS = !!u.match(/\(i[^;] ;( U;)? CPU. Mac OS X/); //ios终端
1. 高德
// 苹果和安卓头部不一样 let proto = isiOS ? 'iosamap://path' : 'amapuri://route/plan' ; const AppUrl = proto "?t= 0&slat=" curLat "&slon=" curLng "&sname=" currAddr "&dlat=" elat "&dlon=" elng "&dname=" eaddr "&src=xxx"; ToggleAppAndH5(AppUrl,Callback)
2.百度
// 苹果和安卓头部不一样 let proto = isiOS ? 'baidumap://' : 'bdapp://' const AppUrl = proto "map/direction?region=" cityName "&origin=latlng:" curLat "," curLng "|name:" currAddr "&destination=latlng:" elat "," elng "|name:" eaddr "&coord_type=bd09ll&mode=driving&src=com.youbei.chefu"; ToggleAppAndH5(AppUrl, Callback)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
