How to Choose the Right WebView and JSBridge for Cross‑Platform Mobile Apps

To improve development efficiency, the document recommends using cross‑platform technologies like Uni‑app, Taro, or Kbone together with JSBridge for bidirectional communication across multiple platforms.

Applicable scenarios include marketing features that appear both in mini‑programs and native apps, without involving complex components such as maps; the solution follows a one‑code‑base, multi‑platform reuse principle.

Technology Design

Adopt a hybrid development mode where the app embeds an WebView container to load H5 content.

WebView wv = findViewById(R.id.wv);
wv.loadUrl("http://www.hao123.com");

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

WebView Kernel Selection

Android:

Before Android 4.4: WebKit kernel with limited performance.

Android 4.4 and later: Chromium kernel improves performance but still needs compatibility handling.

Android 5.0+: Android System WebView is a separate APK.

Third‑party kernels: Crosswalk (better adaptation for low‑end devices but large size) and Tencent X5 (optimizes WebView experience, used by WeChat).

Documentation: https://x5.tencent.com/docs/index.html

iOS:

iOS 8 and below: UIWebView (deprecated).

iOS 8 and above: WKWebView with the same JavaScript engine as Safari, offering better performance.

JSBridge Origin and Methods

JSBridge connects JavaScript and native code, enabling bidirectional calls. Common implementations include intercepting URL schemes, injecting API methods, and rewriting prompt (the latter is omitted).

Intercept URL Scheme

// JavaScript side
let url = 'jsbridge://doAction?title=分享标题';
let iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() { iframe.remove(); }, 100);

// Native side (iOS example)
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    let url = navigationAction.request.url?.absoluteString
    let scheme = navigationAction.request.url?.scheme
    let method = navigationAction.request.url?.host
    let query = navigationAction.request.url?.query
    if url != nil && scheme == "jsbridge" {
        print("scheme == \(scheme)")
        print("method == \(method)")
        print("query == \(query)")
        switch method! {
        case "doAction":
            self.doAction()
        case "configNative":
            self.configNative()
        default:
            print("default")
        }
        decisionHandler(.allow)
    } else {
        decisionHandler(.cancel)
    }
}

Injection API

// JavaScript side
window.webkit.messageHandlers.nativeBridge.postMessage(message);

// iOS side (WKWebView configuration)
let configuration = WKWebViewConfiguration()
configuration.userContentController = WKUserContentController()
configuration.userContentController.add(self, name: "nativeBridge")
let wkWebView = WKWebView(frame: self.view.frame, configuration: configuration)

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "nativeBridge" {
        NSLog("Received data %@", message.body)
        // Native logic here
    }
}

Third‑Party Library

Considering cost and development efficiency, the document recommends using DSBridge , a modern cross‑platform JSBridge supporting synchronous and asynchronous calls between JavaScript and native code.

iOS: https://github.com/wendux/DSBridge-IOS

Android: https://github.com/wendux/DSBridge-Android

Cross‑Platform Technology Selection Criteria

Supports compilation between WeChat mini‑programs and H5, covering more platforms.

Has a large user base, long‑term maintenance, and backing from major companies.

Acceptable learning, development, and maintenance costs.

Conclusion

Both mini‑programs and native apps can share the same functionality. For iOS, use WKWebView; for Android, use Tencent X5 . Employ DSBridge for bidirectional communication. While Uni‑App can be considered for cross‑platform development, its code may require ~40% manual adjustments, so a thorough evaluation during the requirement review phase is necessary.