Version: 3.x

Taro 介绍

简介#

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

版本说明#

当前 Taro 已进入 3.x 时代，相较于 Taro 1/2 采用了重运行时的架构，让开发者可以获得完整的 React/Vue 等框架的开发体验，具体请参考《小程序跨框架开发的探索与实践》。

如果你想使用 Taro 1/2，可以访问文档版本获得帮助。

版本相关更多的文档可以参考：Taro 版本升级权威指南和从旧版本迁移到 Taro Next

学习资源#

【教程】5 分钟上手 Taro 开发

【视频】5分钟快速上手 Taro 开发小程序

【掘金小册】Taro 多端开发实现原理与实战

更多的资源点击查看 Awesome-Taro ，如果您有好的资源或教程和大家分享，点击提交资源到 awesome-taro

社区共享#

Taro 交流社区——让每一次交流都被沉淀

你可以在交流社区里提问、讨论、吐槽。

Taro 物料市场——让每一个轮子产生价值

你可以在物料市场里找到一些开源的模板、组件和项目，也欢迎你分享你的成果。

使用案例#

Taro 已经投入了我们的生产环境中使用，业界也在广泛地使用 Taro 开发多端应用。

查看更多的案例，请点击

我们正在征集更多优秀案例，欢迎点击提交

Taro 特性#

框架支持#

React/Nerv 支持#

在 Taro 3 中可以使用完整的 React/Nerv 开发体验，具体请参考基础教程——React

代码示例

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

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

  componentDidShow () { }

  componentDidHide () { }

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

Vue/Vue3 支持#

在 Taro 3 中可以使用完整的 Vue/Vue3 开发体验，具体请参考基础教程——Vue、基础教程——Vue3

代码示例

<template>
  <view class="index">
    <text>{{msg}}</text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World！'
    }
  },
  created () {},
  onShow () {},
  onHide () {}
}
</script>

多端转换支持#

Taro 方案的初心就是为了打造一个多端开发的解决方案。

目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端。

加入共建#

加入 Taro 社区共建倡议#

Taro 邀你加入社区共建

为 Taro 贡献代码#

Taro 非常欢迎社区开发者为 Taro 贡献代码，在贡献之前请先阅读贡献指南。

如果你想为 Taro 实现一个重要功能，需要先撰写 RFC 文档，按照 Taro 的RFC 机制进行操作，在经过社区讨论完善后才可以进行代码的提交。

问题反馈与建议#

给 Taro 提 ISSUE

Taro UI#

一款基于 Taro 框架开发的多端 UI 组件库。

Taro UI 特性：

基于 Taro 开发 UI 组件
一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5 多端适配运行（ReactNative 端暂不支持）
提供友好的 API，可灵活的使用组件

开发交流#

扫码添加 凹凸实验室-小助手 ，回复 Taro 即可进群。（Taro 开发交流 1 - 26 群已满）