Mastering Deep Linking: Seamlessly Open Apps from H5 Pages

With the rapid growth of the Internet, users spend more time in apps and rely heavily on them, yet each app is isolated. H5 pages serve as a bridge to directly wake an app and navigate to a specific page, improving user experience and reducing operation costs.

Common Scenarios

Click a button on an H5 page to open an app page.

Click a URL in an SMS (game invite, news, activity landing page) to open an app page.

What Is Deep Linking?

Deep linking refers to a link that opens a specific content page inside an app rather than just launching the app. Both Android and iOS provide implementations such as Universal Links, App Links, and custom URL Schemes.

Ways to Wake an App

URL Scheme

URL Scheme is the first‑generation solution for deep linking. It uses a custom protocol to launch an app from a web page or another app.

Scheme format: [scheme]://[host][:port]/[path]?[query] Typical attributes:

scheme – protocol name defined by the developer

host – domain name

port – port number

path – page path

query – request parameters

Example of invoking a scheme from JavaScript: window.location.href = schemeUrl; Drawbacks

If the target app is not installed, the link fails.

Multiple apps may register the same scheme, causing conflicts.

WebViews in other apps cannot directly use the scheme.

WeChat on Android cannot directly invoke a scheme; a guide or tag is needed.

Detection of app installation requires listening to hidden or blur events.

Universal Links (iOS)

Introduced in iOS 9, Universal Links replace custom schemes. When a user taps a matching HTTPS link, iOS redirects to the corresponding location inside the app.

Workflow:

Configure the domain in the apple-app-site-association file (HTTPS required).

Parse the file to obtain bundleId, paths, etc.

After the app is installed, the first launch fetches the file and routes to the appropriate page.

Sample apple-app-site-association file:

{
  "applinks": {
    "apps": [],
    "details": [{
      "appID": "appID",
      "paths": ["appShare/app/link", "appShare/app/link/*"]
    }]
  },
  "appclips": {
    "apps": ["appID.Clip"]
  }
}

Verification can be done by opening the link on a device or using Apple’s validation tools.

Advantages

Uses standard HTTP/HTTPS links, preventing other apps from hijacking.

Secure: iOS checks the association file on the server.

Works even if the app is not installed—opens the web page.

One URL works for both web and app.

Private communication between apps without exposing the scheme.

Limitations

Requires iOS 9 or later.

App Links (Android)

Announced at Google I/O 2015, App Links allow a normal web link to open a specific page in an Android app, provided the app is installed and verified.

Workflow:

Configure AndroidManifest.xml.

Provide a assetlinks.json file under .well-known on the domain.

Sample assetlinks.json:

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.app",
      "sha256_cert_fingerprints": ["<fingerprint>"]
    }
  }
]

Verification can be performed with Android Studio’s App Links Assistant or by testing the link on a device.

Third‑Party Services

Solutions such as MLink (now Jiguang Magic Link) and OpenInstall provide SDKs to simplify deep linking, parameter passing, and statistical tracking.

WeChat Specific Tips

WeChat does not allow direct app jumps, but the following methods can be used:

Whitelist the target app in WeChat.

Redirect to App Store via the Tencent App Store (应用宝).

Use WeChat Open Tags (e.g., <open-tag-launch-app>) after configuring the JS SDK.

Requirements:

WeChat version 7.0.12 or later.

iOS 10.3+ or Android 5.0+.

Integration steps:

Set the JS interface security domain in the WeChat public platform.

Include the JS SDK (at least version 1.6.0): http://res.wx.qq.com/open/js/jweixin-1.6.0.js.

Configure wx.config with the required openTagList (e.g., ['open-tag-launch-app']).

Wrap the trigger element with <open-tag-launch-app>.

<open-tag-launch-app extinfo="extinfo">
  <button>Open App</button>
</open-tag-launch-app>

Existing Problems

Web cannot detect whether the app is installed, requiring fallback strategies.

If the app is not installed, the user loses the current context after installation.

Conclusion

The article combines practical experience and platform guidelines to help developers implement deep linking across H5, iOS, Android, and WeChat, highlighting configuration steps, verification methods, advantages, and common pitfalls.