在H5中喚起APP原理:經過Scheme協議打開APPScheme的組成:scheme:path[#fragment]git
<div class="btn" onClick="openApp">打開App</div> function openApp() { // 經過iframe的方式試圖打開APP,若是能正常打開,會直接切換到APP // 每一個APP有本身scheme協議名稱,例如微信是weixin:// // 不然跳轉APP下載頁 var ifr = document.createElement('iframe'); ifr.src = 'APP協議://打開頁面路徑'; ifr.style.display = 'none'; document.body.appendChild(ifr); window.setTimeout(function(){ downloadAPP() document.body.removeChild(ifr); },2000) } function downloadAPP() { // 判斷是Android仍是iOS const u = navigator.userAgent; let system = ''; if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) { system = 'Android'; } else if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { system = 'iOS'; } else { system = 'unknown'; } // 根據系統不一樣,跳轉不一樣的下載APP地址 if(system === 'Android') { // TODO:這裏還能夠根據手機廠商的不一樣跳轉各自廠商的應用商店 window.location = "安卓下載地址" } else if(system === 'iOS') { window.location = "iOS商店地址" } }
https://github.com/suanmei/ca...,具體使用見githubgithub
import CallApp from 'callapp-lib'; function openApp(){ const option = { scheme: { protocol: 'matchu', }, appstore: 'appstore的應用地址', yingyongbao: '應用寶地址', fallback: '打開失敗後的頁面', timeout: 3000, }; const lib = new CallApp(option); lib.open({ path: '打開APP的指定頁面', }); }