Taro多终端开发实战系列

Taro多终端开发实战系列（二）

 

多终端统一开发框架的安装和使用

Node 环境

Taro 是一个基于 NodeJS 的多端统一开发框架，在安装使用 Taro 之前需要确保已安装好 Node 环境。

你可以直接从 NodeJS 官网下载 NodeJS 安装包来安装 Node 环境，但我们更推荐使用 Node 版本管理工具 nvm 来安装管理 Node，这样不仅可以在不同版本的 Node 之间自由切换，而且在全局安装的时候也不再需要加 sudo 了。

 

Npm 与 Yarn

安装好 Node 之后你就可以直接使用 NPM 来安装 Taro 的开发工具了，当然你还有一个选择就是使用 Yarn，Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新 Node 包管理工具，相比于 NPM，它具有速度更快、安装版本统一、更加清爽简洁等特点。你可以从 Yarn 官网获得相关的安装信息。

查看版本号测试是否已经成功安装：

 

Taro-cli

安装好 NPM 或 Yarn 后，就可以全局安装 Taro 开发工具 @tarojs/cli 了。如果你是使用 NPM 安装，使用如下命令：

npm install -g @tarojs/cli

如果你是使用 Yarn 安装，使用如下命令：

yarn global add @tarojs/cli

安装完毕，测试一下是否安装成功：

如果上述的版本都可以正常输出，说明安装的基础准备已经就绪了。

 

使用

到目前我们已经完成了 Taro 的安装，下面我们看看怎么使用。我们将建一个叫做 myTaro 的项目。使用命令创建模板项目： taro init myTaro

 

命令行上会提示 Taro 即将创建一个新项目!，接着 Taro 会提示你输入项目介绍，我们这里输入 我的第一个 Taro 项目；而后让你选择是否使用 TypeScript，我这里不使用 TypeScript ，输入 n ; 接着提供 CSS 预处理器选择，有 Sass、Less、Seyless，我选择了 Less；然后是选择模板，再选择默认模版，完成后，Taro 开始创建项目，自动安装依赖，这里可能需要等待一会。过一会就会出现创建myTaro成功的提示。

注：如果遇到安装以来丢失的情况，请自行挂在cnpm进行依赖安装。

其他安装微信小程序、百度小程序、支付宝小程序都是大同小异的，可以参考官网的介绍，这里不做详细介绍了。官网地址：https://nervjs.github.io/taro/docs/GETTING-STARTED.html

 

H5

H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览。H5 编译预览及打包：

# npm script

npm run dev:h5

# 仅限全局安装

taro build --type h5 --watch

# npx 用户也可以使用

npx taro build --type h5 --watch

 

React Native

React Native 端运行需执行如下命令，React Native 端相关的运行说明请参见 React Native 教程。

# npm script

npm run dev:rn

# 仅限全局安装

taro build --type rn --watch

# npx 用户也可以使用

npx taro build --type rn --watch

 

更新Taro

Taro提供了更新命令来更新CLI工具自身和项目中的Taro依赖。

更新Taro-cli 工具：

#taro

taro update self

# npm

npm i -g @tarojs/cli@latest

 

更新项目中的以来，执行下边的命令

taro update project

 

运行

 

总结

今天的笔记主要记录了环境安装，taro-cli的安装以及taro项目的初始化，再到trao项目的运行、编译、启动。这里需要再次强调一下如果使用npx，请自行学习一下npx,并且了解npx的优点和缺点。

另外特别要注意安装失败的情况，一定要使用国内代理。