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 configuration和compile configuration details。
Source Code
Like the mini program specification, Taro contains an app
that describes the overall application and multiple page
s that describe their respective pages.
app
The mini program contains the following files:
File | Required | Funtions |
---|---|---|
app.js | yes | mini program entry |
app.css | no | mini program global style |
app.config.js | yes | mini 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
.
import './app.css';
page
A mini program page consists of three files:
File | Required | Funtions |
---|---|---|
page.js | yes | page entry |
page.css | no | page style |
page.config.js | no | page configuration |
1. Page Configuration
page.config.js
The page configuration file corresponding to the mini program specification page.json
The 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
.
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