Taro开发实践

Posted by Wh0ami-hy on September 10, 2024

1. 概念

Taro 在组件、API、路由等规范上,遵循微信小程序规范,所以在 Taro 中使用 React 和开发者熟悉的 Web 端有一些差异

因为在 Taro 3 中开发者使用的是真实的 React,React 的 API 如 ComponentuseStateuseEffect 等都需要从 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 应用由一个入口组件和至少一个页面组件所组成。

3.1. 入口组件

3.2. 页面组件

4. Taro插件

4.1. 使用 HTML 标签

4.2. 跨端请求库


本站总访问量