docs

title
Taro 介绍

import Link from '@docusaurus/Link' import { ReactIcon, VueIcon } from '@site/static/icons' import TabItem from '@theme/TabItem' import Tabs from '@theme/Tabs'

import News from './news'

简介

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 / 快手 小程序 / H5 / RN 等应用。

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

特性

多端转换支持

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

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

• <img title="H5" src={require('@site/static/img/platform/h5.png').default} className="icon_platform" width="25px" /> H5
• <img title="React Native" src={require('@site/static/img/platform/rn.png').default} className="icon_platform" width="25px" /> React Native
• <img title="微信小程序" src={require('@site/static/img/platform/weapp.png').default} className="icon_platform" width="25px" /> 微信小程序
• <img title="京东小程序" src={require('@site/static/img/platform/jd.png').default} className="icon_platform" width="25px" /> 京东小程序
• <img title="百度小程序" src={require('@site/static/img/platform/swan.png').default} className="icon_platform" width="25px" /> 百度智能小程序
• <img title="支付宝小程序" src={require('@site/static/img/platform/alipay.png').default} className="icon_platform" width="25px" /> 支付宝小程序
• <img title="抖音小程序" src={require('@site/static/img/platform/tt.png').default} className="icon_platform" width="25px" /> 抖音小程序
• <img title="QQ 小程序" src={require('@site/static/img/platform/qq.png').default} className="icon_platform" width="25px" /> QQ 小程序
• <img title="钉钉小程序" src={require('@site/static/img/platform/ding-talk.png').default} className="icon_platform" width="25px" /> 钉钉小程序
• <img title="企业微信小程序" src={require('@site/static/img/platform/wework.png').default} className="icon_platform" width="25px" /> 企业微信小程序
• <img title="支付宝 IOT 小程序" src={require('@site/static/img/platform/alipay.png').default} className="icon_platform" width="25px" /> 支付宝 IOT 小程序
• <img title="飞书小程序" src={require('@site/static/img/platform/lark.png').default} className="icon_platform" width="25px" /> 飞书小程序
• <img title="快手小程序" src={require('@site/static/img/platform/kuaishou.png').default} className="icon_platform" width="25px" /> 快手小程序

框架支持

在 Taro 3 中可以使用完整的 <img title="react" src={require('@site/static/img/framework/react.png').default} className="icon_platform" width="25px" /> React / <img title="vue" src={require('@site/static/img/framework/vue.png').default} className="icon_platform" width="25px" /> Vue / <img title="preact" src={require('@site/static/img/framework/preact.png').default} className="icon_platform" width="25px" /> Preact / <img title="svelte" src={require('@site/static/img/framework/svelte.png').default} className="icon_platform" width="25px" /> Svelte / <img title="nerv" src={require('@site/static/img/framework/nerv.png').default} className="icon_platform" width="25px" /> Nerv 开发体验，具体请参考：

• 基础教程——React
• 基础教程——Vue
• 基础教程——Vue3
• 基础教程——Preact

<Tabs defaultValue="React" values={[ {label: , value: 'React'}, {label: , value: '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>
    )
  }
}

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

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

新闻资讯

Taro UI

Taro 3 只能配合使用 taro-ui@next 版本

安装命令： npm i taro-ui@next

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

Taro UI 特性：

• 基于 Taro 开发 UI 组件
• 一套组件可以在多端适配运行（ReactNative 端暂不支持）
• 提供友好的 API，可灵活的使用组件

学习资源

【资讯】Taro 团队博客

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

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

【掘金小册】Taro 多端开发实现原理与实战 (已下架，仅购买用户可阅)

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

项目状态

使用案例

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

查看更多的案例，请点击

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