【亲测免费】 Taroify 开发教程

1. 项目目录结构及介绍

Taroify 项目的主要目录结构如下：

- src
  - config
    - index.ts // 配置文件
  - global.css // 全局样式文件
  - app.tsx // 应用入口文件
  - components // 自定义组件
  - pages // 页面文件夹
    - index
      - index.tsx // 首页
      - index.less // 页面样式
  - utils // 辅助函数
- public
  - images // 图片资源
- .env.development // 开发环境配置
- .env.production // 生产环境配置
- package.json // 项目依赖和脚本
- taro.config.js // Taro 配置文件
- tsconfig.json // TypeScript 配置

• src 存放项目的主要源代码，包括配置、全局样式、页面和组件。
• config 目录用于存储项目配置。
• global.css 定义全局 CSS 样式。
• app.tsx 作为应用程序的入口文件，导入并渲染主组件。
• components 中存放自定义的可复用组件。
• pages 用来组织各个页面，每个页面有自己的业务逻辑和样式。
• utils 包含一些辅助函数和工具类。
• public 通常用于存储静态资源，如图片。
• .env 文件用于设置环境变量。
• taro.config.js 是 Taro 项目的配置文件，用于设置构建选项等。
• tsconfig.json 设定了 TypeScript 编译规则。

2. 项目的启动文件介绍

app.tsx

src/app.tsx 是项目的核心入口文件，它负责加载整个应用的根组件。通常，这里会导入 ConfigProvider 来统一应用的基础配置，并包裹你的主要 App 组件：

import { ConfigProvider } from '@taroify/core'
import App from './App'

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

App 是你自定义的应用组件，在这里你可以组合使用 Taroify 的组件来构建界面。

3. 项目的配置文件介绍

taro.config.js

Taro 的配置文件 taro.config.js 用于设置项目的构建选项，比如路径映射、编译规则等。一个基本的 taro.config.js 示例可能如下所示：

const { defineConfig } = require('@tarojs/taro')

module.exports = defineConfig({
  namespace: 'yourAppName',
  h5: {
    publicPath: './', // 静态资源前缀
  },
  compileType: 'miniprogram',
  esnext: {
    include: ['src'],
    exclude: ['node_modules'],
  },
})

• namespace: 用于生成小程序的命名空间。
• h5.publicPath: 设置 H5 平台的静态资源路径。
• compileType: 指定构建目标，这里是微信小程序。
• esnext: 配置 TypeScript 和 ESNext 的转换规则。

.env 文件

.env 文件用于设置环境变量，不同的环境有不同的配置文件，例如 .env.development 和 .env.production。这些环境变量可以在项目中通过 process.env 访问。

例如：

VUE_APP_API_URL=http://localhost:3000/api

这里的 VUE_APP_API_URL 可以在项目中被用来设置开发或生产环境的 API 地址。

以上就是 Taroify 项目的目录结构、启动文件和配置文件的基本介绍。了解这些基础知识后，你就可以开始创建并运行项目了。记得在实际开发中查阅 Taroify 的官方文档，以便获取更详细的指导和示例。