Taro 介绍

简介

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

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

特性

多端转换支持

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

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

  • H5
  • ReactNative
  • 微信小程序
  • 京东小程序
  • 百度小程序
  • 支付宝小程序
  • 字节跳动小程序
  • QQ 小程序
  • 钉钉小程序
  • 企业微信小程序
  • 支付宝 IOT 小程序

框架支持

在 Taro 3 中可以使用完整的 React / Vue / Vue3 / Nerv 开发体验,具体请参考:

示例代码

  1. import React, { Component } from 'react'
  2. import { View, Text } from '@tarojs/components'
  3. export default class Index extends Component {
  4. state = {
  5. msg: 'Hello World!'
  6. }
  7. componentWillMount () { }
  8. componentDidShow () { }
  9. componentDidHide () { }
  10. render () {
  11. return (
  12. <View className='index'>
  13. <Text>{this.state.msg}</Text>
  14. </View>
  15. )
  16. }
  17. }

示例代码

  1. <template>
  2. <view class="index">
  3. <text>{{msg}}</text>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data () {
  9. return {
  10. msg: 'Hello World!'
  11. }
  12. },
  13. created () {},
  14. onShow () {},
  15. onHide () {}
  16. }
  17. </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 开发多端应用。

查看更多的案例,请点击

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

Taro 介绍 - 图3