taro 微信公众号_Taro 小程序开发大型实战（三）：实现微信和支付宝多端登录...

欢迎继续阅读《Taro 小程序开发大型实战》系列，前情回顾：在第一篇中，我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型：Taro 小程序开发大型实战(一)：熟悉的 React，熟悉的 Hooks​zhuanlan.zhihu.com在第二篇中，我们用 Taro 自带的路由功能实现了多页面跳转，并用 Taro UI 组件库升级了应用界面：Taro 小程序开发大型实战(二)：多页面跳转和 Taro UI 组件库​zhuanlan.zhihu.com

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

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

cd ultra-club

在正式开始之前，我们希望你已经具备以下知识：基本的 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 (

普通登录

)

}

我们使用了 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 (

openType="getUserInfo"

onGetUserInfo={onGetUserInfo}

type="primary"

className="login-button"

loading={isLogin}

>

微信登录

)

}

可以看到，微信登录按钮和之前的普通登录按钮多了很多东西：添加了 isLogin 状态，用于表示是否在等待登录中，以及修改状态的 setIsLogin 函数

实现了 onGetUserInfo async 函数，用于处理在用户点击登录按钮、获取到信息之后的逻辑。其中，我们将获取到的用户信息传入 props 中的 setLoginInfo，从而修改整个应用的登录状态

添加了 openType(微信开放能力)属性，这里我们输入的是 getUserInfo(获取用户信息)，欲查看所有支持的 open-type，请查看微信开放文档对应部分

添加了 onGetUserInfo 这个 handler，用于编写在获取到用户信息后的处理逻辑，这里就是传入刚刚实现的 onGetUserInfo

WeappLoginButton 的样式 index.scss 代码如下：

.login-button {

width: 100%;

margin-top