How Tencent Video Built a One‑Code Multi‑Platform Search with Hippy

Background

Tencent Video’s search feature was implemented separately for Android, iOS, H5, mini‑program, PC Web and PC client, each with its own codebase and backend protocol (JCE, PB, etc.). Maintaining these independent implementations caused high manpower and cost.

Design Idea

A "one‑code multi‑platform" template was built on the Hippy framework (Hippy‑Vue) to share a single codebase across all targets. Platform‑specific differences are handled via conditional compilation using an isNative flag, and a unified backend API is selected by a platform identifier.

The template is organized into three layers:

Third‑party tool layer – utilities such as cookie handling, cache, Aegis monitoring, experiment fetching, and build scripts for Android, iOS, H5 and mini‑program.

Data management layer – Vuex store (Vue 2, Vue 3 planned), PB‑to‑TS conversion, request wrappers and global error handling.

UI layer – example pages, routing (vue‑router for H5), and reusable components extracted from existing Hippy apps.

Specific Implementation

Hippy App

The entry file main-native.ts creates the app instance, registers native components, and calls app.$start() after the engine is ready.

Vue.registerElement('LottieView');
Vue.registerElement('VideoView', {
  component: {
    name: 'VideoView',
    processEventData(event, nativeEventName, nativeEventParams) {
      // handle native event
      return event;
    }
  }
});

A custom directive unifies reporting between App and H5:

/**
 * @example
 * <div v-report="'elementReportInfo'"/>
 * <div v-report="'{ pgid, ...extra }'"/>
 */
Vue.directive('report', {
  bind(el) { el.addEventListener('layout', throttledForceReport); },
  unbind(el) { el.removeEventListener('layout', throttledForceReport); },
  inserted: setReport,
  update: setReport,
} as DirectiveOptions);

Conditional compilation driven by isNative ensures that only the code required for the target platform is bundled, preventing code bloat.

H5

The H5 entry is main.ts. It uses standard Vue‑router for navigation and runs on a local HTTP server for debugging. The same template code is shared with the App version; only platform‑specific configuration differs.

Mini‑Program

The mini‑program is built with Taro‑Vue, which is compatible with Hippy‑Vue. Entry file app.ts creates the app instance, app.vue defines UI, and app.config.ts holds global configuration. Build scripts automatically convert Hippy‑Vue code to Taro‑compatible code.

Deployment Scenarios

Local debugging – Hippy + Chrome DevTools via a WebSocket channel.

Test environment – Uses test‑specific APIs, CDN, and offline packages; environment variables switch configurations.

Production environment – Bundles offline packages for the App. A size‑limit script ( STATIC_SIZE_LIMIT) uploads images exceeding the limit to CDN and inlines smaller ones to keep the package size small.

Key Technical Points

Native component registration is performed in main-native.ts so that components such as LottieView and VideoView can be used directly in Vue templates. app.$start() is called after the Hippy engine initialization; it bridges JS and native layers via a jsbridge.

Backend requests are wrapped with a unified fetch protocol; the template provides automatic PB‑to‑TS conversion for protobuf interfaces.

Environment variables are injected during the build to select the appropriate API endpoints, CDN URLs and configuration files for test vs. production.

Conditional compilation ( isNative) and the custom v-report directive eliminate redundant code and harmonize analytics reporting across platforms.

Future Improvements

Planned enhancements include adding Vue 3 support, expanding the component library, and migrating components to the Athena component platform for easier upgrades.