Html5內(nèi)喚醒百度、高德APP的實現(xiàn)示例
發(fā)布時間:2019-05-20 16:47:25 作者:Hwh520zyn
我要評論

這篇文章主要介紹了Html5內(nèi)喚醒百度、高德APP的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
前幾天,聯(lián)合黑卡反饋了一個需求,需要在H5中打開百度APP或者是高德APP,于是我在網(wǎng)上查了相關(guān)文檔,下面放上鏈接: 1.高德地圖 2.百度地圖
具體思路就是點擊選擇地圖的時候,先去請求APP鏈接,800毫秒后無響應(yīng),再跳轉(zhuǎn)至H5鏈接。這樣的做法有一點不好就是不管跳不跳APP,都會跳到H5的鏈接。有好的想法可以評論一下。
下面放相關(guān)代碼:
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毫秒后調(diào)用H5鏈接 let timer = setTimeout(function () { clearTimeout(timer); AppCallback(); }, 800); window.onblur = function () { clearInterval(timer); }; } function Callback(){ // 這里放相關(guān)H5鏈接 if (mapType === 'baidu') { frameDom.attr('src', "http://api.map.baidu.com/direction?origin=latlng:"+ 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', "https://ditu.amap.com/dir?type=car&from[lnglat]="+ 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)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了html5喚醒APP小記的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-27