Taro入门合集，新手小白也可以做项目（1）共86

最新推荐文章于 2025-05-24 00:31:04 发布

原创最新推荐文章于 2025-05-24 00:31:04 发布 · 883 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#taro

小程序专栏收录该内容

1 篇文章

订阅专栏

2025年第一天，终于有空闲，今天以及往后的日子手拉手，带你开发一款自己的多端小程序，感谢你的关注支持，我会持续分享✍️。

Taro简介

Taro 的定位是开放式跨端跨框架，它支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书小程序 / H5 / RN 等应用。

现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候编写一套代码能够适配到多端的能力就显得极为需要。

1.1多端转换支持

Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。

目前官方支持转换的平台如下：

1.2框架支持

在 Taro 3 中可以使用完整的编辑 React / 编辑 Vue / 编辑 Preact / 编辑 Svelte / 编辑 Nerv 开发体验，具体请参考：

React
Vue

示例代码

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World！',
  }

  componentWillMount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className="index">
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

安装及配置

2.1执行命令全局安装 cnpm install -g @tarojs/cli

2.2初始化项目

选择自己喜欢/擅长的语言，sudo taro init taro-myApp

我的文件有权限，所以命令增加了 sudo ,你也可以直接执行 taro init taro-myApp

2.3项目目录结构

执行完命令，它会自动 pnpm install安装依赖，最终项目目录结构如下

├── dist 编译结果目录
|
├── config 项目编译配置目录
| ├── index.js 默认配置
| ├── dev.js 开发环境配置
| └── prod.js 生产环境配置
|
├── src 源码目录
| ├── pages 页面文件目录
| | └── index index 页面目录
| | ├── index.js index 页面逻辑
| | ├── index.css index 页面样式
| | └── index.config.js index 页面配置
| |
| ├── app.js 项目入口文件
| ├── app.css 项目总通用样式
| └── app.config.js 项目入口配置
|
├── project.config.json 微信小程序项目配置 project.config.json
├── project.tt.json 抖音小程序项目配置 project.tt.json
├── project.swan.json 百度小程序项目配置 project.swan.json
├── project.qq.json QQ 小程序项目配置 project.qq.json
|
├── babel.config.js Babel 配置
├── tsconfig.json TypeScript 配置
├── .eslintrc ESLint 配置
|
└── package.json

怎么样，是不是觉得和曾经的小程序一样，没错！

app.config.js 对应小程序规范的全局配置文件 app.json，优势在于它是 JS 文件可以编写逻辑。配置以微信小程序的全局配置为规范。
page.config.js 对应小程序规范的页面配置文件 page.json，优势在于它是 JS 文件可以编写逻辑。配置以微信小程序的页面配置为规范