Html5内唤醒百度、高德APP的实现示例
建站知识 2021-07-02 23:00www.168986.cn长沙网站建设
前几天,联合黑卡反馈了一个需求,需要在H5中打开百度APP或者是高德APP,于是我在网上查了相关文档,狼蚁网站SEO优化放上链接 1. 2.
具体思路就是点击选择地图的时候,先去请求APP链接,800毫秒后无响应,再跳转至H5链接。这样的做法有一点不好就是不管跳不跳APP,都会跳到H5的链接。有好的想法可以评论一下。
狼蚁网站SEO优化放相关代码
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://api.map.baidu./direction?origin=latlng:"+ curLat +","+ curLng +"|name:"+ currAddr +"&destination=latlng:"+ elat +","+ elng +"|name:"+ eaddr +"®ion="+ cityName +"&mode=driving&output=html&src=.youbei.chefu"); } else if (mapType === 'amap') { frameDom.attr('src', "https://ditu.amap./dir?type=car&from[lnglat]="+ curLng +","+ curLat +"&from[name]="+currAddr+"&to[lnglat]="+ elng +","+ elat +"&to[name]="+eaddr+"&src=.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=.youbei.chefu"; ToggleAppAndH5(AppUrl, Callback)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML