Taro 小程序开发大型实战（一）：熟悉的 React，熟悉的 Hooks

正当移动互联网进入白热化阶段时，以微信小程序为代表的一类“轻应用”异军突起。它们无需下载，使用方便，“用完即走”，同时功能也较为完备，一经推出即得到了各大平台和及用户的热烈追捧。但是问题也随之而来——开发者们要同时维护 Web 端、移动端、微信小程序、支付宝小程序等等多套用户界面，其维护成本可以想象。作为一个优秀的多端统一开发解决方案，Taro 的出现则改变了这一情况。正值 Taro 2.x 进入 beta 阶段，让我们沏上一杯茶，开始我们的 Taro 多端小程序开发之旅吧。

起步

对于国内 React 开发者来说，Taro 的出现无疑是福音——它能够让我们用熟悉的 React 代码去搭建各类小程序，并且一份代码可以编译成多个平台的应用（目前包括微信小程序、支付宝小程序、React Native、H5 等等）。随着 Taro 的不断进化，它对 React 代码的支持程度越来越好，所支持的目标平台也越来越多，学习的价值自然不必多言。正值 Taro 进入 2.0.0 版本的 beta 阶段，我们在这一篇教程将手把手带你实现一个能够部署到多端的小程序，让你感受 Taro 的强大与魅力！

在这一系列教程中，我们将构建一个多端小程序应用——奥特曼俱乐部（Ultraman Club，简称 UltraClub），一个支持多端登录（微信和支付宝）的类似贴吧的小程序。我们还提供了项目仓库的 GitHub 地址。项目目前还在开发阶段，您可以跳转到任意一次 commit 查看当前步骤的所有代码哦。

我们将构建什么？

在完成这篇教程后，项目的 GIF 动图展示如下：

前提条件

在阅读这篇教程之前，我们希望你已经具备以下知识：

• 了解 HTML、CSS、JavaScript 的基础知识，如果了解 Sass 就更好了
• 了解 React 框架的基础知识，可以参考这篇教程进行学习；如果接触过 React Native 以及 Hooks 则更好了
• 了解并已经安装好 Node 与 npm，可以参考这篇教程进行学习

除此之外，你还需要下载并安装微信开发者工具，这里是下载地址。

本文所涉及的源代码都放在了 Github 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+Github仓库加星❤️哦~

用 Taro 脚手架初始化项目

首先安装 Taro CLI：

npm install -g @tarojs/cli

然后创建我们的项目：

taro init ultra-club

之后会出现一系列选项，按照下图所示进行选择即可（CSS 预处理器选择 Sass，模板选择“默认模板”，老司机可自行选择使用 TS）：

提示

本项目使用 Sass 主要是为了兼容 taro-ui 的样式，并没有使用到 Sass 的高级特性，如果你不熟悉的话也不用担心哦，就当成是常规的 CSS 代码。

进入到我们的项目目录 ultra-club 之后，可以看到项目模板包括以下文件：

.
├── config                    # 项目配置
│   ├── dev.js                # 开发环境配置文件
│   ├── index.js              # 主配置文件
│   └── prod.js               # 生产环境配置文件
├── package.json
├── project.config.json       # 微信小程序项目配置
└── src                       # 项目源码目录
    ├── app.scss              # 根组件样式
    ├── app.jsx               # 根组件 app
    ├── index.html            # 等待被嵌入代码的 HTML 文档
    └── pages                 # 页面目录
        └── index             # index 页面模块
            ├── index.scss    # index 页面样式
            └── index.jsx     # index 页面组件

我们主要看一下两个代码文件：src/app.jsx 以及 src/pages/index/index.jsx。

初探脚手架代码

src/app.jsx 定义了项目的根组件 App，它的代码如下：

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

import './app.scss'

// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtools')
// }

class App extends Component {
  config = {
    pages: ['pages/index/index'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black',
    },
  }

  // 在 App 类中的 render() 函数没有实际作用