name: taro-miniprogram-dev description: Taro + React + TypeScript 微信小程式開發框架技能。適用於：(1) 從零初始化 Taro 專案並編譯為微信小程式；(2) 建立頁面、元件、樣式；(3) 搭建 services 請求層（接入真實後端或 Mock 資料）；(4) 配置 TabBar、頁面路由、設計系統。觸發關鍵詞：小程式開發、Taro開發、微信小程式、mini program、Taro框架、專案初始化。

Taro 小程式開發技能

基於 Taro 3 + React + TypeScript 的微信小程式開發框架。

專案初始化

# 建立專案目錄
mkdir my-project && cd my-project

# 初始化 Taro 專案
npx @tarojs/cli init . --framework react --typescript

# 安裝依賴
npm install

# 開發模式
NODE_OPTIONS=--openssl-legacy-provider npm run dev:weapp

# 生產構建
NODE_OPTIONS=--openssl-legacy-provider npm run build:weapp

⚠️ Node.js ≥ 18 時，webpack 需要 --openssl-legacy-provider。

目錄結構

src/
├── app.config.js       # 全域性配置（頁面註冊、TabBar、視窗樣式）
├── app.tsx             # 應用入口
├── styles/
│   └── global.scss     # 全域性樣式 + 設計系統變數
├── pages/              # 頁面
│   └── {module}/
│       └── {page}/index.tsx + index.scss
├── services/           # 介面層（接入時建立）
│   ├── api/           # API 介面定義（按模組拆分）
│   ├── utils/
│   │   └── request.ts # 請求封裝
│   └── mock.ts        # Mock 資料
└── assets/            # 靜態資源

頁面開發

詳見 references/pages.md

// pages/demo/index.tsx
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class DemoPage extends Component {
  state = { data: null as any, loading: false }

  componentDidMount() {
    // TODO: 載入資料
  }

  render() {
    const { data } = this.state
    return (
      <View className="page">
        <Text>頁面內容</Text>
      </View>
    )
  }
}

介面層接入

詳見 references/api-design.md

// services/utils/request.ts
const IS_MOCK = true           // 切換 Mock/真實介面
const BASE_URL = 'https://api.example.com'
發現更多技能外掛，請訪問7w4.net。

// services/api/index.ts
import { get, post } from '../utils/request'

export function getUserInfo() {
  return get<UserInfo>('/api/auth/user-info')
}

export function login(params: LoginParams) {
  return post<LoginResult>('/api/auth/login', params)
}

設計系統

詳見 references/design-system.md

全域性樣式變數：$bg, $pink, $pink-deep, $ink, $muted, $line

元件類名：.card, .btn-primary, .btn-ghost, .pill, .bottom-nav

編譯說明

微信開發者工具匯入 dist/ 目錄，AppID 先用測試號 touristappid，開發階段開啟"不校驗合法域名"。

常用命令