1. 概念
Taro 在组件、API、路由等规范上,遵循微信小程序规范,所以在 Taro 中使用 React 和开发者熟悉的 Web 端有一些差异
因为在 Taro 3 中开发者使用的是真实的 React,React 的 API 如 Component
、useState
、useEffect
等都需要从 React 包中获取。
从 Taro v3.5 开始,Taro 将默认使用 React 18 版本
// 从 'react' 包中获取 React API
import React, { Component, useState, useEffect } from 'react'
UI组件使用Taro UI
安装 npm i -g @tarojs/cli@3.6.35
2. 项目结构
├── babel.config.js # Babel 配置
├── .eslintrc.js # ESLint 配置
├── config # 编译配置目录
│ ├── dev.js # 开发模式配置
│ ├── index.js # 默认配置
│ └── prod.js # 生产模式配置
├── package.json # Node.js manifest
├── dist # 打包目录
├── project.config.json # 小程序项目配置
├── src # 源码目录
│ ├── app.config.js # 全局配置
│ ├── app.css # 全局 CSS
│ ├── app.js # 入口组件
│ ├── index.html # H5 入口 HTML
│ └── pages # 页面组件
│ └── index
│ ├── index.config.js # 页面配置
│ ├── index.css # 页面 CSS
│ └── index.jsx # 页面组件,如果是 Vue 项目,此文件为 index.vue
3. 入口组件和页面组件
因为 Taro 遵循小程序的路由规范,所以引入了入口组件和页面组件的概念,分别对应小程序规范的入口组件 app
和页面组件 page
。
一个 Taro 应用由一个入口组件和至少一个页面组件所组成。