全国服务热线:4008-888-888

公司新闻

新手制造H5的办法_Html5内唤醒百度、高德APP的实现

Html5内唤醒百度、高德APP的实现示例   发布     这篇文章主要介绍了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', direction?origin=latlng: + curLat + , + curLng + |name: + currAddr + destination=latlng: + elat + , + elng + |name: + eaddr + region= + cityName + mode=driving output=.youbei.chefu 
 } else if (mapType === 'amap') {
 frameDom.attr('src', dir?type=car from[lnglat]= + curLng + , + curLat + from[name]= +currAddr+ to[lnglat]= + elng + , + elat + to[name]= +eaddr+ .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=.youbei.chefu 
 ToggleAppAndH5(AppUrl, Callback)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


这篇文章主要介绍了html5唤醒APP小记的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服