Taro 介紹

簡(jiǎn)介

Taro 是一套遵循 React 語(yǔ)法規(guī)范的 多端開(kāi)發(fā) 解決方案。

現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要求有所表現(xiàn)的時(shí)候，針對(duì)不同的端去編寫(xiě)多套代碼的成本顯然非常高，這時(shí)候只編寫(xiě)一套代碼就能夠適配到多端的能力就顯得極為需要。

使用 Taro，我們可以只書(shū)寫(xiě)一套代碼，再通過(guò) Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信 / 京東 / 百度 / 支付寶 / 字節(jié)跳動(dòng) 小程序、快應(yīng)用、H5、React-Native 等）運(yùn)行的代碼。

特性

React 語(yǔ)法風(fēng)格

Taro 遵循 React 語(yǔ)法規(guī)范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時(shí)支持使用 JSX 語(yǔ)法，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進(jìn)行開(kāi)發(fā)可以獲得和 React 一致的開(kāi)發(fā)體驗(yàn)。

代碼示例

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

export default class Index extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      title: "首頁(yè)",
      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>
    );
  }
}

由于微信小程序端的限制，有極少數(shù) JSX 的優(yōu)秀用法暫時(shí)不能得到很好地支持，同時(shí)，為了遵循 React 語(yǔ)法，Taro 在寫(xiě)法上也有一些自己的規(guī)范，具體可以參考：Taro 開(kāi)發(fā)最佳實(shí)踐 。

快速開(kāi)發(fā)微信小程序

Taro 立足于微信小程序開(kāi)發(fā)，眾所周知小程序的開(kāi)發(fā)體驗(yàn)并不是非常友好，比如小程序中無(wú)法使用 npm 來(lái)進(jìn)行第三方庫(kù)的管理，無(wú)法使用一些比較新的 ES 規(guī)范等等，針對(duì)小程序端的開(kāi)發(fā)弊端，Taro 具有以下的優(yōu)秀特性

? 支持使用 npm/yarn 安裝管理第三方依賴(lài)

? 支持使用 ES7/ES8 甚至更新的 ES 規(guī)范，一切都可自行配置

? 支持使用 CSS 預(yù)編譯器，例如 Sass 等

? 支持使用 Redux 進(jìn)行狀態(tài)管理

? 支持使用 MobX 進(jìn)行狀態(tài)管理

? 小程序 API 優(yōu)化，異步 API Promise 化等等

支持多端開(kāi)發(fā)轉(zhuǎn)化

Taro 方案的初心就是為了打造一個(gè)多端開(kāi)發(fā)的解決方案。目前 Taro 代碼可以支持轉(zhuǎn)換到 微信/百度/支付寶/字節(jié)跳動(dòng)/QQ/京東小程序 、快應(yīng)用、 H5 端 以及 移動(dòng)端（React Native）。

Taro UI

一款基于 Taro 框架開(kāi)發(fā)的多端 UI 組件庫(kù)。

Taro UI 特性：

• 基于 Taro 開(kāi)發(fā) UI 組件
• 一套組件可以在 微信小程序，支付寶小程序，百度小程序，H5 多端適配運(yùn)行（ReactNative 端暫不支持）
• 提供友好的 API，可靈活的使用組件