Taro 小程序开发大型实战（三）：实现微信和支付宝多端登录

欢迎继续阅读《Taro 小程序开发大型实战》系列，前情回顾：

• 熟悉的 React，熟悉的 Hooks：我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型
• 多页面跳转和 Taro UI 组件库：我们用 Taro 自带的路由功能实现了多页面跳转，并用 Taro UI 组件库升级了应用界面

而在这一篇中，我们将实现微信和支付宝多端登录。如果你希望直接从这一篇开始，请运行以下命令：

git clone -b third-part https://github.com/tuture-dev/ultra-club.git
cd ultra-club

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

在正式开始之前，我们希望你已经具备以下知识：

• 基本的 React 框架知识，可参考这篇文章进行学习
• 对常用的 React Hooks (useState、useEffect)有所了解，后面图雀社区将推出 “一杯茶的时间，上手 React Hooks”，敬请期待！

除此之外，你还需要下载并安装支付宝开发者工具，登录后创建自己的小程序 ID。

多端登录，群魔乱舞

与普通的 Web 应用相比，小程序能够在所在的平台实现一键登录，非常方便。这一步，我们也将实现多端登录(主要包括微信登录和支付宝登录)。之所以标题取为“群魔乱舞”，不仅受了“震惊”小编们的启发，也是因为当今各平台处理登录和鉴权的方式差异很大，很遗憾的是在 Taro 框架下我们依然需要踩很多“坑”才能真正实现“多端登录”。

准备工作

组件设计规划

这一节的代码很长，在正式开始之前我们先查看一下组件设计的规划，便于你对接下来我们要做的工作有清晰的了解。

可以看到“我的”页面整体拆分成了 Header 和 Footer：

• Header 包括 LoggedMine(个人信息)，如果在未登录状态下则还有 LoginButton(普通登录按钮)、WeappLoginButton(微信登录按钮，仅在微信小程序中出现)以及 AlipayLoginButton(支付宝登录按钮，仅在支付宝小程序中出现)
• Footer 则用来显示是否已登录的文字，在已登录的情况下会显示 Logout(退出登录按钮)

配置 Babel 插件

从这一步开始，我们将首次开始写异步代码。本项目将采用流行的 async/await 来编写异步逻辑，因此我们配置一下相应的 Babel 插件：

npm install babel-plugin-transform-runtime --save-dev
# yarn add babel-plugin-transform-runtime -D

然后在 config/index.js 中为 config.babel.plugins 添加相应的配置如下：

const config = {
  // ...
  babel: {
    // ...
    plugins: [
      // ...
      [
        'transform-runtime',
        {
          helpers: false,
          polyfill: false,
          regenerator: true,
          moduleName: 'babel-runtime',
        },
      ],
    ],
  },
  // ...
}

// ...

各组件的实现

实现 LoginButton

首先，我们来实现普通登录按钮 LoginButton 组件。创建 src/components/LoginButton 目录，在其中创建 index.js，代码如下：

import Taro from '@tarojs/taro'
import { AtButton } from 'taro-ui'

export default function LoginButton(props) {
  return (
    <AtButton type="primary" onClick={props.handleClick}>
      普通登录
    </AtButton>
  )
}

我们使用了 Taro UI 的 AtButton 组件，并定义了一个 handleClick 事件，后面在使用时会传入。

实现 WeappLoginButton

接着我们实现微信登录按钮 WeappLoginButton。创建 src/components/WeappLoginButton 目录，在其中分别创建 index.js 和 index.scss。index.js 代码如下：

import Taro, { useState } from '@tarojs/taro'
import { Button } from '@tarojs/components'

import './index.scss'

export default function LoginButton(props) {
  const [isLogin, setIsLogin] = useState(false)

  async function onGetUserInfo(e) {
    setIsLogin(true)

    const { avatarUrl, nickName } = e.detail.userInfo
    await props.setLoginInfo(avatarUrl, nickName)

    setIsLogin(false)
  }

  return (
    <Button
      openType="getUserInfo"
      onGetUserInfo={onGetUserInfo}
      type="primary"
      className="login-button"
      loading={isLogin}
    >
      微信登录
    </Button>
  )
}

可以看到，微信登录按钮和之前的普通登录按钮多了很多东西：

• 添加了 isLogin 状态，用于表示是否在等待登录中，以及修改状态的 setIsLogin 函数
• 实现了 onGetUserInfo async 函数，用于处理在用户点击登录按钮、获取到信息之后的逻辑。其中，我们将获取到的用户信息传入 props 中的 setLoginInfo，从而修改整