GitHub 高星项目推荐:基于 React 的多端开发解决方案—Taro
收藏

Taro 是什么

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。支持用 React 的方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5 与 React Native 等端的应用。项目地址:https://github.com/NervJS/taro 。

GitHub 高星项目推荐:基于 React 的多端开发解决方案—Taro

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

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。

Taro 项目情况

从下图可以看出项目的受关注度:

GitHub 高星项目推荐:基于 React 的多端开发解决方案—Taro

既然是一个多端解决方案,Taro 最重要的能力当然是写一套代码输出多端皆可运行的代码。目前 Taro 已经支持一套代码同时生成 H5 和小程序,App端(React Native)端也即将支持,同时诸如快应用等端也将得到支持。

同时 Taro 也已经投入到了生产环境使用,目前已经支撑了一个 3 万行代码小程序 TOPLIFE 的开发和部分京东购物小程序,未来也将会支撑更多的京东核心业务小程序。

GitHub 高星项目推荐:基于 React 的多端开发解决方案—Taro

安装

Taro 项目基于 node,请确保已具备较新的 node 环境(>=8.0.0),推荐使用 node 版本管理工具 nvm 来管理 node,这样不仅可以很方便地切换 node 版本,而且全局安装时候也不用加 sudo 了。

cli 工具安装

首先,你需要使用 npm 或者 yarn 全局安装@tarojs/cli,或者直接使用npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

使用

使用命令创建模板项目

$ taro init myApp

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目

$ npx @tarojs/cli init myApp
GitHub 高星项目推荐:基于 React 的多端开发解决方案—Taro

taro init myApp command screenshot

在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn>cnpm>npm 顺序进行检测,一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装

# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install

进入项目目录开始开发,目前已经支持 微信/百度/支付宝/字节跳动/QQ 小程序、H5、快应用以及 ReactNative 等端的代码转换,针对不同端的启动以及预览、打包方式并不一致。

更多文档参考:https://taro-docs.jd.com/taro/docs/README.html

参考

  • https://www.oschina.net/p/taro
  • https://taro-docs.jd.com/taro/docs/README.html

公众号