使用 Taro + LeanCloud 开发一款即时通讯小程序

为什么使用 Taro ？

#

Taro 是一套遵循 React 语法规范的多端开发解决方案，这意味着通过使用 Taro 编译工具，咱们可以编写一套代码，实现多端运行。比如微信小程序、支付宝小程序、web 端，甚至是 App 等。我们以微信小程序的实践为例进行讲解。它采用与 React 一致的组件化思想，支持使用 JSX 语法，支持 TypeScript，这可以使咱们的前端代码更加的优雅简洁。

为什么使用 LeanCloud ？

#

LeanCloud 是国内做得不错的一家 BaaS (Backend as a Service) 提供商。涵盖的面也非常的广，包括数据存储、文件存储、云引擎、容器、即时通讯、消息推送、短信、游戏云等等。通过使用 LeanCloud 的服务，我们可以极大地减轻后端的代码量，甚至达到无后端的效果。在本实践中，我们通过使用 LeanCloud 的即时通讯和数据/文件存储功能，便实现了不编写一条后端代码，就能完成一个可用的即时通讯小程序的效果。

LeanCloud 在文档的完善度和可读性上也是国内做得比较好的。此外，LeanCloud 是个人认为可以算是互联网浪潮中气质比较清丽的一家公司，其官网的开放资源页面开放了一些产品之外的资源，包括文化价值、期权激励、薪酬体系、工作评价和反馈机制等等。其写道「我们相信开放和透明会使一家公司更具长期竞争力，所以我们尽可能把信息公开。让所有人了解我们、监督我们的同时，也希望这些信息可以为他人参考和借鉴，发挥最大的价值。」尤其是作为一家技术公司，其还收录了余光中先生对于中文表达的论述文章《余光中：怎样改进英式中文？- 论中文的常态与变态》，以作为文档风格的参考。由此可见公司对于产品气质的追求。

前期准备

#

在写代码之前，我们需要准备开发环境，包括微信开发者环境、React 环境、Taro 环境等。LeanCloud 的开发环境我们暂且不用，当开发到这一阶段时再引入。

• 微信开发者环境

  微信开发者环境的搭建非常简答，咱们按照官方文档的步骤完成帐号申请及开发者工具安装即可。

• Taro 开发环境

  • node 安装

    Taro 是基于 node 的，我们需要安装 ≥ 8.0.0 版本的 node.

    我们推荐使用 nvm 来进行 node 的安装。nvm 是一款 node 版本管理工具，它允许你同时安装多个版本的 node，并随时进行切换。

    参照如下的链接，可以完成 nvm 及 node 的安装：

    使用 nvm 安装 Nodejs

  • taro 安装

    安装好 node 后，我们就可以使用 npm 包管理工具了。

    通过如下命令，我们可以完成 taro 的安装：

    $ npm install -g @tarojs/cli

    但是呢，npm 并不是特别的好用，尤其是在国内，速度感人（国内有 cnpm，然而坑更多）。我们可以先使用 npm 来安装 yarn，yarn 是 facebook 推出并开源的一款包管理工具，和 npm 相比，yarn 有着众多又是，其中最明显的便是速度快。然后我们让 yarn 来接替 npm 的一切工作：

    # 安装 yarn
    $ npm install -g yarn
    # 使用 yarn 来安装 taro
    yarn global add @tarojs/cli

创建项目

#

我们使用如下命令行，来创建一个名为 chattingDemo 的 taro 项目：

taro init chattingDemo

创建过程中会询问一些配置项。在询问是否使用 TypeScript 时，我们输入 Yes。在询问使用何种 CSS 预处理器时，我们选择 Sass。

创建完成后，我们使用如下命令进行项目的实时编译：

$ yarn dev:weapp --watch

之后我们打开微信开发者工具，导入项目，选择我们刚刚所创建项目的根目录。便能看到亲切的 hello world 了。

使用任意一款的代码编辑器（此处使用 VS Code）打开项目目录，我们来看一下文件结构。

最外层一共有四个文件夹，分别是配置文件夹 config、依赖文件夹 node_modules、代码文件夹 src，以及编译生成的文件夹 dist。而 src 中有用于存放不用页面的 pages 文件夹，我们创建项目时已经自动生成了一个首页，因此我们可以看到 pages 中有一个 index 文件夹，其中有着我们的 typescript 代码文件 index.tsx 以及样式文件 index.scss。

此外，根目录下还有我们的入口文件 app.tsx 以及对应的样式文件 app.tsx。

现在我们就进入 src 文件夹，开始我们的编码。

页面的生命周期

#

打开 index.tsx 文件夹，我们发现 Taro 已经帮我们写了不少东西。

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
      </View>
    )
  }
}

文件中声明了一个 Index 类（继承自 Taro 框架中的 Component 类），实现了 render 方法。在这里我们发现，在 render 方法里，我们直接返回了 HTML 标签。这就是 JSX 语法的妙处。它允许我们使用面向对象的方式来写 HTML。

除了 render 方法之外，我们可以看到还有另外五个方法被实现了，虽然内容是空的。

这个五个方法，对应了小程序页面生命周期的不同阶段。

	// 页面初次渲染前调用
	componentWillMount () { }

	// 页面初次渲染后调用
  componentDidMount () { }

	// 页面销毁前调用
  componentWillUnmount () { }

	// 页面由后台切到前台后调用
  componentDidShow () { }

	// 页面由前台切到后台后调用
  componentDidHide () { }

总的来说，这个文件中的代码描述了页面要显示的内容，以及各个生命阶段要执行的操作。那么，操作的结果，如何对页面内容产生影响呢？