Practical Guide to Using Taro for Multi‑Platform Mini‑Program Development

As business expands and mini‑program platforms multiply, writing separate code for each platform becomes impractical; native mini‑program development also has many drawbacks. Taro offers a unified solution that supports React‑style development and can generate code for WeChat, JD, Baidu, ByteDance, H5, and React Native from a single codebase.

What is Taro? Taro is an open‑source cross‑platform framework that allows developers to write once using React, Vue, or Nerv and compile to various mini‑programs, H5, and native apps.

Why use Taro? It addresses native mini‑program pain points such as complex file structures, inconsistent naming conventions, limited ESNext support, and outdated build tools, while providing fast development, multi‑terminal adaptation, and a robust component library.

Technology comparison (Taro vs. WePY, Chame Leon, mpvue) shows Taro’s superior conversion ability, support for all major mini‑programs, and richer ecosystem.

Design philosophy focuses on React‑style development, code conversion, and runtime adaptation to ensure the same behavior across platforms.

Compilation principle – source code is parsed into an Abstract Syntax Tree (AST), traversed and transformed, then generated into platform‑specific code.

Example Taro component (React) :

import Taro from '@tarojs/taro'
import { Text, View, Button } from '@tarojs/components'
import React from 'react'
import './A.scss'

type Props = { onClick: () => void; tip: string }
export default class A extends React.PureComponent
{
  componentWillUnmount() {}
  componentDidMount() {}
  onClickHandler = () => { this.props.onClick() }
  render(): JSX.Element {
    return (
Click
a component {this.props.tip}
)
  }
}

Typical mini‑program page initialization:

# Install CLI globally
npm install -g @tarojs/cli
# Create project
taro init myTaroApp

# Or using npx
npx @tarojs/cli init myTaroApp

Running the project for different platforms:

# Development
npm run dev:weapp   # WeChat
npm run dev:swan    # Baidu
npm run dev:jd      # JD

# Build
npm run build:weapp
npm run build:swan
npm run build:jd

Platform‑specific code can be guarded with environment checks:

if (process.env.TARO_ENV === 'jd') {
  // JD‑specific logic
}
if (process.env.TARO_ENV === 'weapp') {
  // WeChat‑specific logic
}

CSS can be conditionally included using directives such as /* #ifdef weapp */ and /* #endif */ .

The article also covers project directory structures, multi‑terminal configuration files, and tips for handling differences in component APIs, styling units, and platform limitations (e.g., Baidu’s lack of externalClasses , JD’s missing canvas API, etc.).

Finally, it introduces the Taro ecosystem – the Tarot UI component library, custom templates with TypeScript and Redux, the MiniDebug tool for multi‑terminal debugging, and future plans like extending support to Flutter.