Skip to main content
Version: 3.x

Directory Structure

Directory Structure

├── dist                        Compilation results directory
|
├── config Project compilation configuration directory
| ├── index.js Default Configuration
| ├── dev.js Development environment configuration
| └── prod.js Production environment configuration
|
├── src Source directory
| ├── pages Page file directory
| | └── index index Page directory
| | ├── index.js index page
| | ├── index.css index page style
| | └── index.config.js index page configuration
| |
| ├── app.js Project entry
| ├── app.css Project general style
| └── app.config.js Project entry configuration
|
├── project.config.json Wechat mini program configuration
├── project.tt.json ByteDance Mini Program configuration
├── project.swan.json Baidu smart program
├── project.qq.json QQ Mini Program
|
├── babel.config.js Babel configuration
├── tsconfig.json TypeScript configuration
├── .eslintrc ESLint configuration
|
└── package.json

Compile Configuration

For configuring the build configuration of Taro projects, modifying Webpack configuration, etc., please refer tocompile configurationcompile configuration details

Source Code

Like the mini program specification, Taro contains an app that describes the overall application and multiple pages that describe their respective pages.

app

The mini program contains the following files:

FileRequiredFuntions
app.jsyesmini program entry
app.cssnomini program global style
app.config.jsyesmini program global configuration

Eamples are available for viewing according to the framework of your choice:React, Vue, Vue3

1. Mini Program Global Configuration

app.config.js Global configuration file corresponding to the mini program specification app.json,The advantage is that it is JS files that can write logic. The configuration starts with global configuration of WeChat Mini Progam。Detail reference Global Configuration

2. Mini Program Global Style

Mini Program global style files can be introduced via the ES6 specification's import.

app.js
import './app.css';

page

A mini program page consists of three files:

FileRequiredFuntions
page.jsyespage entry
page.cssnopage style
page.config.jsnopage configuration

1. Page Configuration

page.config.js The page configuration file corresponding to the mini program specification page.jsonThe advantage is that it is js configuration to Wechat Mini Program page configuration as specification。Detail reference page configuration

2. Page Style

Page style files can be introduced via the ES6 specification import.

pages/index/index.js
import './index.css';

3. Page Routing

Page routing is consistent with the mini program specification and needs to be configured in the mini program global configuration app.config.js.

Project Configuration

Each mini program platform has its own project profile, and Taro supports adapting them. For details, please refer toproject configuration

Babel Configuration

Babel configuration reference Github

ESLint Configuration

ESLint configuration reference Github