Convert Figma logo to code with AI

NervJS logotaro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

35,310
4,764
35,310
1,323

Top Related Projects

A framework for building native applications using React

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

164,677

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

8,578

Remote Administration Tool for Windows

Full featured HTML framework for building iOS & Android apps

Quick Overview

Taro is an open-source framework for building cross-platform applications using React. It allows developers to write once and deploy to multiple platforms, including WeChat Mini Programs, H5, React Native, and more. Taro aims to provide a unified development experience across different platforms.

Pros

  • Cross-platform development: Write code once and deploy to multiple platforms
  • Large ecosystem: Extensive plugin system and component library
  • React-based: Familiar syntax and concepts for React developers
  • Active community: Regular updates and strong support

Cons

  • Learning curve: Requires understanding of React and platform-specific concepts
  • Performance overhead: Cross-platform nature may lead to some performance trade-offs
  • Limited native functionality: Some platform-specific features may not be fully supported

Code Examples

  1. Creating a simple component:
import { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class HelloWorld extends Component {
  render () {
    return (
      <View className='hello-world'>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}
  1. Using Taro hooks:
import { useState, useEffect } from 'react'
import { View, Text } from '@tarojs/components'

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('Count changed:', count)
  }, [count])

  return (
    <View onClick={() => setCount(count + 1)}>
      <Text>You clicked {count} times</Text>
    </View>
  )
}
  1. Making an API request:
import Taro from '@tarojs/taro'

Taro.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log('Response:', res.data)
  },
  fail: (err) => {
    console.error('Error:', err)
  }
})

Getting Started

  1. Install Taro CLI:
npm install -g @tarojs/cli
  1. Create a new Taro project:
taro init myApp
cd myApp
  1. Start development server:
npm run dev:h5
  1. Build for production:
npm run build:h5

Replace h5 with the target platform (e.g., weapp for WeChat Mini Program, rn for React Native) as needed.

Competitor Comparisons

A framework for building native applications using React

Pros of React Native

  • Larger community and ecosystem, with more third-party libraries and resources
  • Better performance for complex, animation-heavy applications
  • More mature and battle-tested in production environments

Cons of React Native

  • Steeper learning curve, especially for developers new to mobile development
  • More complex setup and configuration process
  • Larger app size due to bundled JavaScript runtime

Code Comparison

React Native:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <Text>Hello, React Native!</Text>
  </View>
);

Taro:

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

class App extends Component {
  render () {
    return (
      <View className='container'>
        <Text>Hello, Taro!</Text>
      </View>
    )
  }
}

Key Differences

  • Taro focuses on cross-platform development for multiple mini-program platforms, while React Native primarily targets iOS and Android
  • Taro uses a unified API that works across different platforms, whereas React Native requires platform-specific code in some cases
  • Taro has better integration with popular Chinese platforms like WeChat and Alipay

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Pros of Ionic Framework

  • Broader platform support, including iOS, Android, and web
  • Larger community and ecosystem with more plugins and resources
  • More mature and established framework with longer history

Cons of Ionic Framework

  • Steeper learning curve, especially for developers new to Angular
  • Potentially larger app size due to inclusion of Cordova and other dependencies
  • Performance may be slower compared to native apps or Taro-built apps

Code Comparison

Ionic Framework (Angular):

@Component({
  selector: 'app-home',
  template: `
    <ion-content>
      <ion-button (click)="showAlert()">Click Me</ion-button>
    </ion-content>
  `
})
export class HomePage {
  constructor(private alertController: AlertController) {}

  async showAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      message: 'This is an alert message.',
      buttons: ['OK']
    });
    await alert.present();
  }
}

Taro:

import Taro from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Index extends Component {
  showAlert = () => {
    Taro.showModal({
      title: 'Alert',
      content: 'This is an alert message.',
      showCancel: false
    })
  }

  render () {
    return (
      <View>
        <Button onClick={this.showAlert}>Click Me</Button>
      </View>
    )
  }
}
164,677

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Pros of Flutter

  • Cross-platform development for mobile, web, and desktop from a single codebase
  • Rich set of pre-built widgets and tools for creating custom UI designs
  • Hot reload feature for faster development and testing

Cons of Flutter

  • Larger app size compared to native applications
  • Steeper learning curve for developers new to Dart programming language
  • Limited access to some platform-specific features

Code Comparison

Flutter:

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter App')),
        body: Center(child: Text('Hello, World!')),
      ),
    );
  }
}

Taro:

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

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}

Summary

Flutter offers a comprehensive cross-platform solution with a rich set of tools and widgets, while Taro focuses on building mini-programs and H5 applications using React-like syntax. Flutter's use of Dart may present a learning curve, but it provides excellent performance and a consistent UI across platforms. Taro leverages familiar web technologies, making it easier for web developers to adopt, but may have limitations in terms of native functionality compared to Flutter.

8,578

Remote Administration Tool for Windows

Pros of Quasar

  • More comprehensive UI component library with Material Design support
  • Better documentation and community support
  • Supports both web and mobile development with a single codebase

Cons of Quasar

  • Steeper learning curve due to its extensive feature set
  • Larger bundle size compared to Taro
  • Less focused on WeChat mini-program development

Code Comparison

Taro (React-like syntax):

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

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}

Quasar (Vue-based syntax):

<template>
  <q-page class="flex flex-center">
    <q-btn color="primary" label="Hello, World!" />
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex'
}
</script>

Both frameworks offer cross-platform development capabilities, but Taro is more focused on WeChat mini-programs and React-like development, while Quasar provides a more comprehensive solution for Vue-based web and mobile app development with a rich set of UI components.

Full featured HTML framework for building iOS & Android apps

Pros of Framework7

  • More mature and established project with a larger community and ecosystem
  • Offers a complete UI framework with pre-built components for rapid development
  • Supports both web and hybrid mobile app development

Cons of Framework7

  • Steeper learning curve due to its comprehensive nature
  • Less flexible for custom designs and may require more effort to override default styles
  • Limited to iOS and Android-like UI, which may not be suitable for all projects

Code Comparison

Framework7:

const app = new Framework7({
  root: '#app',
  name: 'My App',
  theme: 'auto',
  routes: [
    // Define routes here
  ]
});

Taro:

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

class Index extends Component {
  render () {
    return (
      <View>
        <Text>Hello, World!</Text>
      </View>
    )
  }
}

Framework7 uses a more configuration-based approach, while Taro follows a React-like component structure. Framework7's code is focused on initializing the app with various options, whereas Taro's code demonstrates a simple component declaration.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Taro

开放式跨端跨框架解决方案,轻松构建可以运行在 小程序/Web/APP 上的应用

PRs Welcome GitHub contributors GitHub commit activity GitHub closed issues GitHub commits since latest release (by date) GitHub Release Date

简体中文 | English

👽 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。

目录

  1. 简介
  2. 学习资源
  3. 社区共享
  4. 项目状态
  5. 使用案例
  6. 加入共建
  7. 问题反馈与建议
  8. 特别鸣谢
  9. 贡献者们
  10. 开发计划
  11. 更新日志
  12. 开发交流

简介

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

版本迁移

Taro 1/2 迁移至 Taro 3,请阅读《Taro 版本升级权威指南》

学习资源

5 分钟上手 Taro 开发

awesome-taro

社区共享

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

UI 库

名称地址介绍支持的框架支持的 Taro 版本
taro-uihttps://taro-ui.jd.com/#/一套基于 Taro 框架开发的多端 UI 组件库ReactTaro 1/2/3
NutUIhttps://nutui.jd.com/#/京东风格的轻量级移动端 Vue 组件库Vue3Taro 3
taroifyhttps://taroify.gitee.io/taroify.com/introduce/轻量、可靠的小程序端 Taro 组件库(Vant 的 Taro 版本)ReactTaro 3
@antmjs/vantuihttps://antmjs.github.io/vantui/#/home基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库ReactTaro 3
Tardhttps://tard-ui.selling.cn/一套基于 Taro 框架开发的多端 React UI 组件库ReactTaro 3

项目状态

Alt

使用案例

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

征集更多优秀案例

加入共建

加入 Taro 社区共建倡议

Taro 邀你加入社区共建

为 Taro 贡献代码

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

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

问题反馈与建议

给 Taro 提 ISSUE

强烈推荐阅读 《提问的智慧》、《如何向开源社区提问题》 和 《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

Let's fund issues in this repository

特别鸣谢

nanjingboyjsNewbeeQiyu8Garfield550
nanjingboyjsNewbeeQiyu8Garfield Lee

贡献者们

开发计划

Milestones

更新日志

本项目遵从 Angular Style Commit Message Conventions,更新日志请查阅 Release。

开发交流

官方交流微信群

License

MIT License

Copyright (c) O2Team

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

NPM DownloadsLast 30 Days