taro开发工具安装_基于 Taro 与 Taro UI 创建多平台应用（各种小程序、H5 前端应用）...

如果你要为移动端设备开发微信小程序或者 H5 前端应用，可以考虑基于 Tarojs 开发。这套框架提供的开发体验要比原本的小程序开发体验更好，而且可以把应用编译成多种小程序，比如微信小程序、支付宝小程序，还有直接能在浏览器上运行的 H5 前端应用。

宁皓网最近发布了《电商小程序案例》系列，里面介绍了使用京东凹凸实验室出品的 Taro 与 Taro UI 创建小程序。

虽然 Taro 应用也可以编译成 iOS 与 Android，但这个开发体验现在比不过基于Flutter 开发。

Taro 是应用的开发框架，Taro UI 是为 Taro 准备的一套界面组件，在开发应用的时候可以直接使用。使用这套框架的准备，参考基于 Taro 框架的开发体验。会员现在就可以开始在线学习这套课程了。

使用 Taro 框架创建应用，可以选择使用 TypeScript 或者普通的 JavaScript 语言。也可以选择应用的数据管理方法，比如 Redux。应用的后端，你需要自己使用其它系统或框架创建，比如 WordPress、Drupal 或 Node.js 。

课程并不限制你使用的后端服务，在课程里，我们会基于 Node.js 准备一套开发时演示用的后端服务接口。虽然是演示接口，但也提供了很多后端服务的开发思路，比如 Hash 用户的密码，处理用户微信登录与绑定帐户，签发与验证 JWT 等等。

下面我们先了解一下基于 Taro 框架的开发过程，还有 Taro UI 的使用方法。了解更多细节，会员们可以在线观看相关视频。

创建项目

使用 Taro 框架提供的命令行工具，创建一个新的 Taro 项目。可以不需要安装它，直接用 npx 执行：

npx @tarojs/cli init ninghao-taro

在创建项目的时候会问一些问题，暂时创建一个不用 TypeScript 与任何数据管理方法的 Taro 项目，CSS 预处理可以选择使用 Sass。创建的项目会用 yarn 去安装项目的依赖，这个过程需要一些时间，特别是选择了 Sass 作为 CSS 预处理。如果发现卡住了，可以 Ctrl + C 停止，然后进入到 ninghao-taro 目录，删除掉 node_modules 目录，手工再执行npm install 安装项目的依赖。

页面(pages)

假设你要开发一个电商应用，需要一个商店的主页，页面要放在src/pages 目录的下面，页面可以放在各自的目录下面，比如 src/pages/shop/index.js，这样创建的这个商店主页，页面地址就是 /pages/shop/index。每个页面都是一个类，类里面需要用 render 方法返回页面的视图，页面里可以添加一些配置信息，使用生命周期方法，在不同的时候执行指定的事情。比如页面被挂载的时候，执行请求从后端服务那里拿到页面需要的数据。

/src/pages/show/index.js:

import Taro, { Component } from '@tarojs/taro'

import { View, Text } from '@tarojs/components'

class ShopIndex