听说移动端要凉凉？

最新推荐文章于 2022-08-02 20:55:03 发布

原创最新推荐文章于 2022-08-02 20:55:03 发布 · 713 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Taro

其他专栏收录该内容

7 篇文章

订阅专栏

Taro是一款遵循React语法规范的多端统一开发框架，支持微信小程序、H5、ReactNative等端的代码编译，采用组件化思想，支持JSX语法和TypeScript，提供现代化的开发流程和高效的开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hi, I'm Taro

一套遵循 React 语法规范的多端统一开发框架

简介

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

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN 等）运行的代码。

特性

React 语法风格

Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。

快速安装：

/** Quick Start With NPM Or Yarn **/
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

特性 Features

多端运行	一键生成可以在微信小程序/H5/ReactNative等端运行的代码
语法风格	采用React语法标准，支持JSX书写，让代码更具表现性
组件化	支持组件化开发，让代码可以复用，让功能开发更加清晰
TypeScript	全面支持TypeScript，提供更强大的生产力
开发体验	贴心的代码智能提示,实时代码检查,让开发效率大幅提升
现代化开发流程	配套的开发工具Taro CLI让开发流程自动化，一切都从一行命令开始

多端适配 Support

微信小程序	已适配
H5	已适配
React Native	已适配
快应用	即将上线
支付宝小程序	适配中
百度智能小程序	适配中

代码示例 Examples

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

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }
  
  componentWillMount () {}
  
  componentDidMount () {}
  
  componentWillUpdate (nextProps, nextState) {}
  
  componentDidUpdate (prevProps, prevState) {}
  
  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    return (
      <View className='index'>
        <View className='title'>{this.state.title}</View>
        <View className='content'>
          {this.state.list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}