跪拜 Guibai
← Back to the summary

Three Ways to Launch a Native App from a Web Page

H5 App Launching Frontend Implementation Solutions

On the web (H5) side, launching an app primarily involves the frontend acting as a "starting pistol." The core of the implementation is using specific links to "wake up" the target application on the phone. Below are three mainstream frontend implementation methods, which you can choose based on your target platform and business scenario.

🧩 Core Solution Comparison

Solution Applicable Platform Implementation Method Core Advantages Main Disadvantages
URL Scheme Universal (iOS & Android) Uses links with a custom protocol header (e.g., myapp://) Best compatibility, simple to implement, the most common method Imperfect experience: Cannot 100% determine if the launch was successful. Often blocked in in-app browsers like WeChat, and has a risk of being hijacked.
Universal Link (iOS) / App Link (Android) iOS 9+ / Android 6+ Uses ordinary https:// web links Best experience, no pop-up for app launch. If the app is not installed, it directly opens the corresponding webpage, allowing seamless fallback. Complex implementation, requires server-side and client-side configuration, and only supports newer system versions.
Platform-Specific Open Tags WeChat In-app Browser (Android) Uses the WeChat JS-SDK's <wx-open-launch-app> open tag Good experience within the WeChat ecosystem, the officially recommended solution. Limited to use within the WeChat in-app browser (mostly on Android), restricted scenario.

Specific Implementation and Code Examples

URL Scheme Solution (Most Universal)

This is the most basic solution; the frontend just needs to trigger a link in a specific format.

Frontend Trigger

You can use any of the following methods to trigger this link.

// Method 1: Directly change the current page address (most common)
window.location.href = 'your-app-scheme://path/to/page?param=value';

// Method 2: Create a hidden iframe (try in some browsers)
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'your-app-scheme://...';
document.body.appendChild(iframe);

// Method 3: Simulate clicking an a tag
const a = document.createElement('a');
a.href = 'your-app-scheme://...';
a.click();

Note: The your-app-scheme://... link is provided by your client-side colleagues, who need to configure the corresponding URL Scheme in the app.

How to Gracefully Fallback (Detect Failure)

URL Scheme cannot perfectly determine if the app launch was successful. A common "workaround" is to use a timer + listen for page visibility changes. If the app is successfully launched, the browser page will go into the background, and document.hidden will become true. If the page is still visible after a few seconds, the launch likely failed, and you can then guide the user to download.

let timer = setTimeout(() => {
    // After 3 seconds, if the page is not hidden, consider the launch failed
    window.location.href = 'https://your-app-download-page.com'; // Redirect to download page
}, 3000);

document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        // Page is hidden, meaning the app launch was successful, clear the timer, stop the redirect
        clearTimeout(timer);
    }
});

// Start the launch
window.location.href = 'your-app-scheme://...';

Universal Link / App Link Solution (Best Experience)

This solution merges app launching and web access into one. You no longer need to use strange scheme:// links but directly use an ordinary https:// link.

Frontend Trigger

Just like opening a normal webpage.

<!-- When the user clicks this link, if the app is installed and configured correctly, it will open the app directly instead of opening the webpage in the browser -->
<a href="https://your-app-associated-domain.com/path">Open App</a>

Core Prerequisite: This solution entirely depends on the configuration work done by the client-side (iOS/Android developers) and server-side. They need to associate a domain (like your-app-associated-domain.com) with the app and place a specific verification file in the website's root directory. The frontend does not need to be heavily involved; just provide the correct link.

Special Handling for WeChat Environment (WeChat Open Tags)

If your page is mainly distributed within the WeChat in-app browser, URL Schemes are likely to be blocked. In this case, you need to use the officially provided <wx-open-launch-app> tag.

Implementation Key Points

  1. Prerequisites: Must have a verified WeChat Service Account and a WeChat Open Platform account, and bind the two together.
  2. Include JS File: Include https://res.wx.qq.com/open/js/jweixin-1.6.0.js or a later version in the page.
  3. Permission Configuration: Obtain permission to use the tag via wx.config.
  4. Use the Tag: Place the <wx-open-launch-app> tag on the page; its appid attribute must be the AppId of the mobile application on the Open Platform.
<wx-open-launch-app
    id="launch-btn"
    appid="Your Open Platform Mobile App AppId"
    extinfo="Parameters passed to the App"
    @ready="onReady"
    @launch="onLaunch"
    @error="onError">
  <!-- Place a button for clicking here; WeChat will automatically replace it with a jumpable style -->
  <script type="text/wxtag-template">
    <style>
      .btn { width: 100px; height: 40px; background: #07c160; color: #fff; text-align: center; line-height: 40px; border-radius: 4px; }
    </style>
    <div class="btn">Open App</div>
  </script>
</wx-open-launch-app>

Note: WeChat restricts this tag to perform better on Android; iOS also needs testing based on specific versions and policies. A common practice is to use this tag as a transparent overlay on a button, displayed only in the WeChat Android browser, and triggered on click.

Summary and Recommendations

  1. Preferred Fallback Strategy: For compatibility, URL Scheme is a mandatory fallback solution. If pursuing the ultimate experience, you can collaborate with client-side and server-side colleagues to implement Universal Link / App Link for iOS 9+ and Android 6+ systems.
  2. Pay Attention to Specific Platforms: If users mainly access via WeChat, be sure to spend time integrating the WeChat Open Tag, which is the only effective official solution within the WeChat ecosystem.
  3. Core Logic is on the Client Side: The frontend's job is to send the "launch request." Whether the app can be launched and how it handles parameters to jump to a specific page after launch all depend on the configuration and code from client-side colleagues. Therefore, alignment with the client-side team is key to success.