Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration
This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.
Background – After developing H5 marketing activities, Ctrip needed to embed them in multiple platforms (App, mini‑programs) using native pages, React Native pages, or embedded pop‑ups, which increased manpower and tied releases to app and mini‑program version cycles.
Solution Overview – Ctrip introduced a cross‑platform shared Web component approach based on the principle “one set of Web code, multiple platforms”. The mini‑program is built with Taro and React, allowing the same React‑based Web components to run directly in the mini‑program while Native and RN platforms load them via a WebView pointing to an H5 page.
Web Components Basics – Web Components consist of Custom Elements, Shadow DOM, and HTML Templates. React (or Vue) can be used to author these components, which are then packaged as standard Web Components.
Example Component – The dialog component zt-dialog is exposed as a custom HTML element and its logic is bundled into a UMD JavaScript file:
<html>
<head>
<script src="https://static.tripcdn.com/zt-dialog.umd.js"></script>
</head>
<body>
<zt-dialog></zt-dialog>
</body>
</html>For the mini‑program the component is provided as an NPM package @ctrip/zt-dialog :
import Dialog from '@ctrip/zt-dialog';
import '@ctrip/zt-dialog/dist/styles/mini.css';Host Environment Identification – Build‑time environment variables (e.g., VITE_COMP_TYPE ) are used to differentiate between “mini” (mini‑program) and “webview” (Native/RN). Sample code:
const onClose = () => {
if (import.meta.env.VITE_COMP_TYPE === 'mini') {
console.log('mini');
} else {
console.log('webview');
}
};
const onJump = () => {
if (import.meta.env.VITE_COMP_TYPE === 'mini') {
console.log('mini jump');
} else {
console.log('webview jump');
}
};Build command: cross-env VITE_COMP_TYPE=mini vite build
Using Host Capabilities – Web components rely on the host for requests, navigation, sharing, and analytics. In Native/RN the WebView provides browser‑level capabilities, while mini‑programs expose these via parameters and bridge methods. Sharing in WeChat mini‑programs requires a button with open-type="share" and a registration flow for share data.
Communication with Host – Two typical scenarios are closing the component and showing it at the right time. Example for closing:
const closePopUp = () => {
if (import.meta.env.VITE_COMP_TYPE === 'mini') {
props.close(); // mini‑program callback
} else if (isRNWebView()) {
window.postMessage(JSON.stringify({ closeModal: true }));
} else if (isNativeWebView()) {
window.Bridge.insideClose(() => {});
}
};For Native, the H5 link includes a query parameter (e.g., insidepop=1 ) and is loaded via a transparent WebView:
Intent intent = new Intent();
intent.setClass(activity, H5Container.class);
intent.putExtra(H5Container.URL_LOAD, 'https://m.ctrip.com/demo/zt-dialog.html?insidepop=1');
AppUtil.startActivity(activity, intent);In RN, a custom WebViewModal component loads the same URL and provides a button to display the modal.
Support Across Platforms – Native uses a transparent WebView, RN wraps WebView with additional bridge logic, and the mini‑program consumes the component as an NPM package wrapped by a higher‑order component that injects request, navigation, and analytics utilities.
Conclusion & Outlook – The cross‑platform Web component strategy consolidates existing capabilities, reduces manpower, and accelerates delivery. Future work will focus on measuring click‑through rates, performance across hosts, and further enriching component interactions.
Ctrip Technology
Official Ctrip Technology account, sharing and discussing growth.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.