taro开发工具安装_taro使用教程（详细版）

Taro框架的简介和开篇介绍

Taro是由京东凹凸实验室推出的框架，目的就是解决多端混乱的局面，也是当下比较新兴的一个框架。

当我们按照一种模式一种代码进行开发，开发完成后，项目就有了在任何终端显示的能力，这是一种想想都很爽的。那具体Taro有那些优点，请看下面的图片。

目前Taro支持的终端

微信小程序

H5 移动端Web页面

百度小程序

支付宝小程序

快应用

ReactNative

字节跳动小程序

QQ轻应用

是目前支持小程序最多的前端框架，并且支持ReactNatvie，说明我们可以轻易的生成媲美原生的APP应用。所以公司的应用如果想全网推广，占用最多的流量入口的话，使用Taro就完全没有问题。

有熟悉uni的同学会讲uni也有这样类似的功能，生成多端应用的功能，而且还有专属的编辑器，调试很方便，下边就放一个taro与uni-app以及其他例如mpvue等的对比图

由此可见，Taro 的强大之处，以及Taro框架在前端的技术的占比会越来越高。而且用统一的框架、统一的API、统一的代码规范以及统一的代码结构，是多么棒的开发体验。

一次开发就可以完成所有主流平台的布局，人力和时间成本压缩到最低，感觉节省了一个亿哦。

下边我们就一起来揭秘Taro这神奇的面纱把

Taro的环境搭建和Hello World

前置知识

学习这个前端框架，你需要一些前置知识：

HTML、CSS，JavaScript这三个是基础知识，最起码要了解能作出简单的静态页面

理解MVVM框架，如果会React框架是最好的

了解ES6相关语法，作为一个当下流行的框架以及2020年的前端开发用ES6让代码规范起来，对项目开发和管理更加的方便

Taro编译工具的介绍

Taro是一套遵循React语法规范的多端开发解决方案,使用Taro，只书写一套代码，再通过Taro的编译工具，讲源代码分别编译出可以再不同端(微信小程序，H5，RN等)运行代码。

所以说这里的Taro编译工具是非常重要的，这里附带一张图。

Taro开发环境的安装

1.第一步是安装@tarojs/cli(脚手架工具)，也有教开发工具的。

这个你可以使用npm或者yarn进行全局安装，命令如下：

npm的安装方式

npm install -g @tarojs/cli

yarn的安装方式

yarn global add @tarojs/cli

打开命令行后，输入上边的命令。

2.安装完成后，就可以用脚手架创建项目，命令如下：

taro init taro-dome

这里有个小坑就是如果你使用npm来安装脚手架的时候，有很大机率会失败，这些失败多是因为国内网络环境限制的。有两种解决方案，第一是"fangqiang"来进行安装，第二种是使用yarn来进行暗转，我这里就使用了yarn。

Hello World程序

通过上边的创建项目，我们的项目已经建立好了，然后就是运行项目，命令如下：

cd taro-dome

npm run dev:h5

在这里运行的是h5模式的，如果要运行小程序的根据package.json中的script设置可知相应的运行方式。

运行后页面会在浏览器显示Hello World，默认的端口为10086，如图：

Taro生成小程序代码并预览

Taro可以生成多端代码，在上一节只生成了h5的显示，这次我们就先来进行生成小程序代码，并进行预览。

生成微信小程序的代码

npm run dev:weapp

输入完命令后，taro编译器自动为我们生成小程序代码到dist目录中。

这里边的app.js、app.json以及app.wxss 这都是微信小程序所对应的文件，有过微信小程序开发的肯定觉得很熟悉，这就是Taro的强大之处，也是Taro框架的开发者肯定是个webpack开发的大牛，编译生成对应的终端的代码，而不是一个壳子嵌套。

在微信开发者工具中预览项目

开发小程序的肯定知道微信开发者工具，如果你是初学的这里给你一个下载的链接，方便下载学习：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载后安装步骤很简单，跟安装QQ几乎一样。

安装完成后，你需要注册一个账号，这个自己按照提示注册就可以了。

注册后导入一个小程序项目

需要注意的是这不是新建，而是导入一个项目。目录选择的是你的taro项目刚才编译后生成的dist目录

AppId如果有在公众平台注册可以填，没有默认是一个测试号直接导入即可。

导入后你就可以看到在微信开发者工具中显示Hello World！了。

注意坑点

千万不要在微信开发者工具中修改dist目录，因为这个文件是由taro编译而来的；

如果要修改在taro的原项目修改，然后通过编译将修改的内容编译到dist文件中

Taro的目录介绍

在目录介绍前肯定会有疑惑，Taro是多端统一框架，前边我们利用编译工具生成了h5和微信小程序的代码，那么其他的支付宝小程序、百度小程序等又是如何生成？

这些的答案都在项目的package.json文件中的scripts部分当中：

"scripts": {

"build:weapp": "taro build --type weapp",

"build:swan": "taro build --type swan",

"build:alipay": "taro build --type alipay",

"build:tt": "taro build --type tt",

"build:h5": "taro build --type h5",

"build:rn": "taro build --type rn",

"build:qq": "taro build --type qq",

"build:quickapp": "taro build --type quickapp",

"dev:weapp": "npm ru