Design and Implementation of a Cross-Platform Front-End API Solution

Background: With the decline of C‑end traffic dividends, external placement has become a key growth lever. Various front‑end containers (WebView H5, React Native/Weex, Flutter, mini‑programs) exist across different apps, leading to duplicated JS API logic and heavy maintenance.

Problem definition: Front‑end code must repeatedly detect the target environment and invoke different APIs, requiring a time‑consuming workflow of environment identification, API inquiry, development, and testing.

Example of duplicated logic:

if (isH5) {
  if (isXianyu) {   // 闲鱼
    webXianyuToast();
  } else if (isTaobao) { // 淘宝
    webTaobaoToast();
  } else if (isAlipay){ // 支付宝
    webAlipayToast()
  }
  // ...
} else if (isWeex)
  // ...

Desired capabilities: usability across WebView, mini‑programs, Wap, etc.; ease of use with a unified entry; richness of supported APIs; extensibility for new apps and containers.

Solution design: Define a cross‑platform API specification, an SDK that abstracts container differences, and supporting tools (documentation, CANIUSE). The specification provides a standard API model, environment probes, and extension mechanisms.

SDK implementation challenges include massive maintenance (55+ APIs across 8 containers and 30+ apps) and the need for multi‑scenario output (window.uni.toast() vs import toast from 'uni‑toast'). The approach uses layered adaptation and atomic API units to enable custom builds.

Result: Centralized capability information, unified SDK, reduced development and testing effort, and adoption across 10+ business units within the Alibaba ecosystem.

Future outlook: Continue expanding open‑source support for various mini‑program and H5 containers, and consider deeper OS‑level unification (e.g., Fuchsia, HarmonyOS).