Master Cross‑Platform App Launch with Modern JS for WeChat, QQ, Weibo & Safari

Background

Recently I worked on using JavaScript to invoke apps from WeChat, QQ, and Weibo. Earlier solutions were rough and outdated. This article shares a complete, up‑to‑date approach for app launch and fallback handling.

Final Effect

When a user clicks an H5 page button to open or download the app, if the app is installed they are taken to the appropriate native page; otherwise they are redirected to the App Store or an app market.

Application Flow

All download/launch entry points are direct redirects. Business logic is centralized in a page (mtlf) to enable code reuse and leverage universal links.

Universal Link Overview

Before iOS 9, both iOS and Android used custom scheme URLs for app launch, which prompted a confirmation dialog. Universal links bypass this dialog by directly opening the app when an

apple-app-site-association.json

file is placed at the project root and the iOS app is configured accordingly.

Platform‑Specific Solutions

WeChat

WeChat used to support universal links, but since Jan 8 2018 it blocks them. The current approach is to redirect to an app market (e.g., Tencent MyApp) which then guides the user to the App Store on iOS or opens the app directly on Android.

Weibo

Weibo still supports universal links. On iOS, we must open the link in Safari; on Android, scheme URLs work only for whitelisted apps (e.g., DaRenDianPing, NetEase Cloud Music). The fallback is to guide users to open the link in the native browser.

QQ

iOS QQ supports universal links and can open iTunes links if the app is not installed. Android QQ also supports scheme URLs, though some older devices may fail on the first attempt due to a 500 ms timeout limitation.

Safari

Safari supports both universal links and direct iTunes links, so the same handling as described for other browsers applies.

Pitfalls

iOS 9 Safari does not support direct iTunes links; use an app market as a fallback.

Detecting successful launch via

setInterval

is unreliable; prefer

document.hidden

or

document.webkitHidden

.

User‑Agent strings containing “Safari” appear on Android as well; combine UA checks with OS detection.

For scheme‑based launch, using an tag click provides the best compatibility.

Testing Tips

Testing every scenario manually on devices is time‑consuming. Instead, configure common User‑Agent strings in Chrome’s device emulator to simulate iOS‑WeChat, iOS‑QQ, iOS‑Weibo, iOS‑Safari, Android‑WeChat, Android‑QQ, and Android‑Weibo environments.

Sample User‑Agents

iOS‑WeChat : Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN

iOS‑QQ : Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1

iOS‑Weibo : Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)

iOS‑Safari : Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1

Android‑WeChat : Mozilla/5.0 (Linux; Android 4.4.2; PE‑TL20 Build/HuaweiPE‑TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220 (0x26060135) NetType/WIFI Language/zh_CN

Android‑QQ : Mozilla/5.0 (Linux; Android 4.4.2; PE‑TL20 Build/HuaweiPE‑TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080

Android‑Weibo : Mozilla/5.0 (Linux; Android 4.4.2; PE‑TL20 Build/HuaweiPE‑TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI‑PE‑TL20__weibo__8.0.2__android__android4.4.2)

GitHub Repository

For the full implementation, see: https://github.com/sunhaikuo/js-arouse-app