How Virtual Routing Boosts Cross-Platform Mobile App Navigation

1. Introduction

Routing is essential in modern mobile development, especially for large cross‑platform applications. Complex page jumps across platforms can be simplified with a good routing design, improving development efficiency and reducing maintenance cost.

2. Background

To support dynamic releases and improve productivity, the Weimeng Merchant Assistant adopted a cross‑platform solution. Existing mainstream routing frameworks are limited to native page jumps and cannot dynamically deliver route URLs or handle version‑specific scenarios, prompting the development of a unified front‑back routing interaction framework.

3. Requirement Analysis

To keep routing consistent across Android, iOS, and mini‑programs, the design must satisfy:

Route URLs must be isolated per platform.

A single trigger event can route to different pages based on app version.

Real page URLs must not be exposed to business developers.

Routes must be dynamically delivered via backend APIs.

Configuration must be consistent across the three platforms.

4. Technical Solution

4.1 Overall Architecture

The concept of a “virtual route” is introduced. A virtual route is a textual string defined by a set of rules, representing the designer’s intent. Each page has a virtual route, under which real routes for Android, iOS, and mini‑programs can be configured.

Virtual route format:

<code>page://{bosId}/{key}/product/module/pageName?param=xxx</code>

{bosId} – unique identifier of the merchant’s real store. {key} – backend‑filled string for business parameters. product – product line identifier. module – module within the business line.

4.1.1 PC Side

The PC side manages virtual route configuration, including virtual URL, real URLs, platform type, version, and implementation type.

4.1.2 Mobile Side

The mobile client fetches the entire virtual route configuration via an API, matches the current event’s virtual route, retrieves the corresponding real URL and platform type, and executes the appropriate jump logic.

4.2 Detailed Implementation

4.2.1 Route Configuration Center

Provides UI for adding virtual URLs and associated real routes for each platform.

4.2.2 Initialize Routing Manager

The manager registers platform‑specific implementations (native, H5, Donut). It stores a map of platform type to its router class.

4.2.3 Initialize Route Table

On startup, the client calls a backend API with system type and version to obtain the route table, filters by platform and version (fallback to latest compatible version), and caches the mapping of virtual routes to real URLs.

4.2.4 Route Jump

When a menu item is clicked, the virtual URL is validated, parameters are parsed, the real URL is looked up, parameters are merged, and the appropriate platform router is invoked.

Core routing code:

<code>when (ImplType.valueOf(rb.implType)) {
    ImplType.NATIVE -> {
        val pr = NativePageRouter(rb)
        pr.routeUrl = routeUrl
        pr.processRoute()
    }
    ImplType.H5 -> {
        val pr = H5PageRouter(rb)
        pr.routeUrl = routeUrl
        pr.processRoute()
    }
    ImplType.DONUT -> {
        val pr = DefaultPageRouter(rb)
        pr.routeUrl = routeUrl
        pr.processRoute()
    }
}</code>

5. Advantages

Dynamic: Routes can be updated from the server without app releases.

Unified: A single virtual route standardizes navigation across platforms.

Flexible: Business developers do not need to know real URLs; changes are made in the PC configuration.

Multi‑platform: Supports Android, iOS, and mini‑programs with extensible router classes.

Disaster‑recovery: Older versions can be used as fallback if a new version’s navigation fails.

6. Practice

After integrating the virtual routing design, the Weimeng Merchant Assistant achieved smoother business iteration. For example, before adoption, mini‑program messages used real paths that broke compatibility across versions. With virtual routing, a single generic real path is configured, and the virtual route determines the correct version‑specific page, solving compatibility issues.

7. Conclusion

The virtual routing interaction design greatly simplifies cross‑platform navigation, allowing developers to focus on business logic while the server dynamically controls page destinations, supports version‑specific routing, and provides robust fallback mechanisms.