一文看懂支撑京东核心业务小程序的统一开发框架「Taro」.docVIP

一文看懂，支撑京东核心业务小程序的统一开发框架「Taro」 Taro 是什么？Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。现如今市面上端的形态多种多样，H5、App (React Native)、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App、快应用等）运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能，有效地提升了开发体验和开发效率。Taro 能提供什么？ ?? 一次编写，多端运行既然是一个多端解决方案，Taro 最重要的能力当然是写一套代码输出多端皆可运行的代码。目前 Taro 已经支持一套代码同时生成 H5 和微信小程序，App（React Native）端也即将支持，同时诸如快应用等端也将于近期得到支持。同时 Taro 也已经投入到了生产环境使用，目前已经支撑了一个 3 万行代码小程序 TOPLIFE 的开发，以及部分京东购物小程序和一起有局小程序，未来也将会支撑更多的京东核心业务小程序。 ?? 现代前端开发流程和微信自带的小程序框架不一样，Taro 积极拥抱社区现有的现代开发流程，包括但不限于：NPM 包管理系统ES6+ 语法自由的资源引用CSS 预处理器和后处理器（SCSS、Less、PostCSS）对于微信小程序的编译流程，我们从 Parcel 得到灵感，自研了一套打包机制将 AST 不断传递，因此代码分析的速度得到了很大的提高。一台 2015 年 的 15寸 RMBP 在编译上百个组件时仅需要大约 15 秒左右。?? 和 React 完全一致的 API 和组件化系统在 Taro 中，你不用像小程序一样区分什么是 App 组件，什么是 Page 组件，什么是 Component 组件，Taro 全都是 Component 组件，并且和 React 的生命周期完全一致。可以说，一旦你掌握了 React，那就几乎掌握了 Taro。而学习 React 的资源也几乎是汗牛充栋，完全不用担心学不会。Taro 和 React 一样，同样使用声明式的 JSX 语法。相比起字符串的模板语法，JSX 在处理精细复杂需求的时候会更得心应手。// 一个典型的 Taro 组件 import Taro, { Component } from @tarojs/taro import { View, Button } from @tarojs/components export default class Home extends Component { constructor (props) { super(props) this.state = { title: 首页, list: [1, 2, 3] } } componentWillMount () {} componentDidMount () {} componentWillUpdate (nextProps, nextState) {} componentDidUpdate (prevProps, prevState) {} shouldComponentUpdate (nextProps, nextState) { return true } add = (e) =gt; { // dosth } render () { const { list, title } = this.state return ( View className=indexgt; View className=titlegt;{title}Viewgt; View className=contentgt; {list.map(item =gt; { return ( View className=itemgt;{item}Viewgt; ) })} Button className=add