项目初始化与配置

环境准备

安装 Node.js

Taro 要求 Node.js 版本 >= 12.0.0，建议使用 LTS 版本。

安装 Taro CLI

# 使用 npm 安装
npm install -g @tarojs/cli

# 使用 yarn 安装
yarn global add @tarojs/cli

# 查看版本
taro --version

创建项目

初始化项目

# 创建项目
taro init myApp

# 选择框架（React、Vue、Nerv）
# 选择模板（默认模板、Redux 模板等）
# 选择 CSS 预处理器（Sass、Less、Stylus）

项目结构

myApp/
├── config/              # 配置目录
│   ├── dev.js          # 开发环境配置
│   ├── index.js        # 全局配置
│   └── prod.js         # 生产环境配置
├── src/                # 源码目录
│   ├── components/     # 组件目录
│   ├── pages/          # 页面目录
│   ├── utils/          # 工具函数
│   ├── app.js          # 应用入口
│   └── app.css         # 全局样式
├── project.config.json # 小程序配置
├── package.json        # 项目依赖
└── README.md           # 项目说明

配置文件

config/index.js

module.exports = {
  projectName: 'myApp',
  date: '2023-10-01',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {},
  copy: {
    patterns: [],
    options: {}
  },
  framework: 'react', // 可选：react、vue、nerv
  compiler: 'webpack5',
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {}
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 1kb
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {}
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

package.json

{
  "name": "myApp",
  "version": "1.0.0",
  "private": true,
  "description": "Taro project",
  "templateInfo": {
    "name": "default",
    "typescript": false,
    "css": "sass"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "dev:weapp": "taro build --type weapp --watch",
    "dev:swan": "taro build --type swan --watch",
    "dev:alipay": "taro build --type alipay --watch",
    "dev:tt": "taro build --type tt --watch",
    "dev:h5": "taro build --type h5 --watch",
    "dev:rn": "taro build --type rn --watch"
  },
  "dependencies": {
    "@tarojs/components": "3.6.20",
    "@tarojs/next": "3.6.20",
    "@tarojs/react": "3.6.20",
    "@tarojs/runtime": "3.6.20",
    "@tarojs/taro": "3.6.20",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@tarojs/mini-runner": "3.6.20",
    "@tarojs/webpack-runner": "3.6.20",
    "@types/react": "18.2.14",
    "@types/webpack-env": "^1.13.6",
    "babel-preset-taro": "3.6.20",
    "eslint-config-taro": "3.6.20",
    "eslint-plugin-taro": "3.6.20",
    "stylelint-config-taro-rn": "3.6.20",
    "stylelint-taro-rn": "3.6.20"
  }
}

开发流程

启动开发服务器

# 微信小程序开发
taro build --type weapp --watch

# H5 开发
taro build --type h5 --watch

# React Native 开发
taro build --type rn --watch

构建生产版本

# 构建微信小程序
taro build --type weapp

# 构建 H5
taro build --type h5

# 构建 React Native
taro build --type rn

常见配置问题

1. 设计稿尺寸适配：在 config/index.js 中设置 designWidth，默认为 750
2. CSS 预处理器：在创建项目时选择，或在 package.json 中添加相应依赖
3. 环境变量：在 config/dev.js 和 config/prod.js 中配置不同环境的变量
4. 自定义构建配置：在 config/index.js 中添加相应插件和配置