在網頁中打開uniapp應用 · uniapp企業級開發指南

[TOC] # 在網頁中打開uniapp應用 ## Android 原生工程配置在`AndroidManifest.xml`入口的Activity中加入以下`intent-filter`： ```xml  <activity android:name="io.dcloud.PandoraEntry" android:theme="@style/TranslucentTheme" android:screenOrientation="portrait" android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize"> ...... <intent-filter> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/> <category android:name="android.intent.category.BROWSABLE"/> <data android:scheme="test" android:host="abc.com" android:path="/entry"/> </intent-filter> </activity> ``` 其中，scheme就相當于協議，host就相當于域名，path就相當于路徑，以上配置完整的URI為： ``` test://abc.com/entry ``` ## 在網頁中跳轉到APP 直接上代碼： ```html <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>喚醒APP</title> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui"> </head> <body> <div> <a id="J-call-app" href="javascript:;" class="label">立即打開>></a> <input id="J-download-app" type="hidden" name="storeurl" value="https://file.lizhiboxue.com/shianonline/apk/sa-learn.apk"> </div> <script> (function(){ /*獲取UA標識，并轉為小寫*/ let ua = navigator.userAgent.toLowerCase(); let config = { /*scheme:必須*/ scheme_IOS: 'test://abc.com/entry', scheme_Adr: 'test://abc.com/entry', download_url: document.getElementById('J-download-app').value, timeout: 600 }; function openclient() { let startTime = Date.now(); let ifr = document.createElement('iframe'); /*通過UA標識，判斷是否是蘋果系統*/ ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr; ifr.style.display = 'none'; document.body.appendChild(ifr); let t = setTimeout(function() { let endTime = Date.now(); if (!startTime || endTime - startTime < config.timeout + 200) { window.location = config.download_url; } }, config.timeout); window.onblur = function() { clearTimeout(t); } } window.addEventListener("DOMContentLoaded", function(){ document.getElementById("J-call-app").addEventListener('click',openclient,false); }, false); })() </script> </body> </html> ``` 以上，先判斷平臺類型（iOS、Android），如果應用存在，打開應用，若不存在，通過URL下載應用。 ## 跳轉到APP并傳參 TODO... ## 跳轉到指定的uniapp頁面 TODO... ## 參考資料 - [安卓：從網頁喚醒APP](https://www.jianshu.com/p/2eb757c9c90c) - [JS喚醒Android APP(包括在外部瀏覽器和WebView)](https://www.jianshu.com/p/fd040859dab5) - [iOS平臺設置UrlSchemes，實現被第三方應用調用](https://ask.dcloud.net.cn/article/64) - [android中的scheme](https://www.jianshu.com/p/8e13860cb6da) - [H5網頁喚醒App有哪些做法](https://cloud.tencent.com/developer/article/1515181)