Taro Yanxuan 项目教程

1. 项目的目录结构及介绍

Taro Yanxuan 项目的目录结构如下：

taro-yanxuan/
├── config/
│   ├── dev.js
│   ├── index.js
│   └── prod.js
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── store/
│   ├── styles/
│   ├── utils/
│   └── app.js
├── .gitignore
├── package.json
├── project.config.json
└── README.md

目录结构介绍

• config/: 包含项目的配置文件，如开发环境配置 dev.js，生产环境配置 prod.js 和默认配置 index.js。
• src/: 源代码目录，包含项目的所有源代码文件。
  • assets/: 存放静态资源文件，如图片、字体等。
  • components/: 存放可复用的组件。
  • pages/: 存放页面组件。
  • services/: 存放与后端交互的服务文件。
  • store/: 存放状态管理相关的文件，如 Redux。
  • styles/: 存放全局样式文件。
  • utils/: 存放工具函数或常量。
  • app.js: 项目的入口文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目的依赖管理文件。
• project.config.json: 小程序的项目配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/app.js，它是整个应用的入口点。以下是 app.js 的基本结构：

import Taro, { Component } from '@tarojs/taro'
import '@tarojs/async-await'
import { Provider } from '@tarojs/redux'
import Index from './pages/index'
import configStore from './store'
import './app.scss'

const store = configStore()

class App extends Component {
  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  render() {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

启动文件介绍

• import 语句：导入必要的模块和组件。
• config 对象：配置小程序的页面和窗口样式。
• render 方法：渲染应用的根组件 Index，并使用 Provider 包裹以提供 Redux 状态管理。
• Taro.render：将应用渲染到 DOM 中。

3. 项目的配置文件介绍

项目的配置文件主要位于 config/ 目录下，包括 dev.js、prod.js 和 index.js。

config/index.js

这是默认的配置文件，通常包含开发和生产环境的通用配置：

module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
  },
  weapp: {},
  h5: {}
}

config/dev.js

这是开发环境的配置文件，通常包含开发服务器的配置和调试选项：

const config = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
  },
  weapp: {},
  h5: {
    devServer: {
      host: 'localhost',
      port: 8080,
      proxy: {
        '/api': {
          target: 'http://localhost:3000',
          pathRewrite: { '^/api': '' },
          changeOrigin: true
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process