Choosing uni-app over taro for Cross‑Platform Mini‑Program Development: Background, Technical Selection, and Case Study

1. Background

With the rapid development of mobile internet, mini‑programs from major platforms (WeChat, Alipay, Baidu, ByteDance, etc.) have achieved massive user bases and commercial success. Because mini‑programs do not require download and have higher activation and conversion rates than H5, the automotive quotation business line has heavily invested in mini‑program development.

Most leading domestic apps have deployed mini‑programs, but each platform has its own development specifications, creating a challenge for limited front‑end teams to support multiple platforms.

2. Technical Selection

The selection of a framework must serve actual business needs and fit the team's skill set. Core requirements focus on improving development efficiency with limited resources, leading to a comparison of the two mainstream cross‑platform frameworks that support mini‑programs: uni‑app and taro.

2.1 Core Requirements

Given limited R&D resources, existing H5 developers need to handle cross‑platform mini‑program development without additional headcount. The two frameworks share many common features:

Support for WeChat, Baidu, Alipay, ByteDance mini‑programs and H5.

Package management via npm/yarn.

Support for ES6+ syntax and preprocessors (less/scss/ts).

State management (taro: Redux/Mobx, uni‑app: Vuex).

2.2 Common Points of uni‑app and taro

taro (by JD) enables writing once in React to target multiple mini‑programs, H5, and React Native; uni‑app (by DCloud) uses Vue.js to compile to iOS, Android, H5, and various mini‑programs. Since the team already has native App developers and prefers Vue, the focus is on mini‑program and H5 support.

2.3 Advantages and Disadvantages

uni‑app was chosen because the team is more familiar with Vue, resulting in lower learning cost, reduced development time and risk, and better cross‑platform compatibility with official IDE support.

3. Application Cases

3.1 uni‑app Project Structure

A typical uni‑app project includes directories such as src , pages , components , static , and configuration files. (Image of project structure omitted for brevity.)

3.2 Rendering Engine

uni‑app offers two rendering engines: a native Weex‑based engine and a WebView engine. Vue pages use WebView; nvue pages (native Vue) use the native engine. If the App side is not needed, nvue can be omitted.

3.3 Differences from Standard Vue Development

DOM tags are replaced (e.g., div → view , img → image , etc.).

Lifecycle functions differ; uni‑app adds application‑level hooks like onLaunch , onShow , and page‑level hooks such as onLoad , onReady .

Third‑party libraries installed via npm may not be directly usable; equivalents must be found in the uni‑app plugin marketplace.

Browser‑specific objects (window, document, cookie) are unavailable on non‑H5 platforms.

3.4 Actual Running Effect

After building with uni‑app, the code was deployed to WeChat, Baidu, Kuaishou, and ByteDance mini‑programs with good compatibility. Platform‑specific features were handled via conditional compilation. (Screenshots of running effects omitted.)

4. Application Effects and Benefits

The automotive quotation line now supports multiple mini‑program platforms simultaneously. Mastering uni‑app boosts development efficiency by 3–4 times. Future plans include a visual editing tool to further accelerate mini‑program and H5 development.