欢迎继续阅读《Taro小程序开发大规模实践》系列文章。回顾：第一篇文章我们使用并实现了一个非常简单的加帖原型：太郎小程序开发大规模实践（一）：熟悉了，熟悉了

第二篇文章我们利用Taro内置的路由功能实现多页面跳转，并利用Taro UI组件库升级应用界面：Taro小程序开发大规模实践（二）：多页面跳转与Taro UI组件库​

在本文中，我们将实现微信和支付宝的多终端登录。如果您想直接从本文开始，请运行以下命令：

git -b -部分

CD俱乐部

在正式开始之前，我们希望您已经具备以下知识：基础框架知识，您可以参考本文进行学习

如果您对常用的（，）有一定的了解，图雀社区稍后将推出“一杯茶入门”，敬请关注！

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

多终端登录，群魔乱舞

与普通网页应用相比，小程序可以在所在平台实现一键登录，非常方便。这一步我们还将实现多终端登录（主要包括微信登录和支付宝登录）。之所以标题是《群魔之舞》，不仅是受到《震撼》编辑们的启发，还因为各个平台处理登录和认证的方式有很大不同。遗憾的是，在Taro框架下，我们还需要踩很多步骤。只有“坑”，才能真正实现“多终端登录”。

准备

组件设计规划

本节的代码很长。在正式开始之前，我们先看一下组件设计方案，以便大家对我们下一步要做的工作有一个清晰的认识。

可以看到“我的”页面分为：（个人信息）、如果未登录、（普通登录按钮）、（微信登录按钮，仅出现在微信小程序中）和（支付宝​​登录按钮，仅出现在支付宝中）小程序）

如果您已登录（注销按钮），则会显示用于显示您是否已登录的文本

配置插件

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

npm --- --save-dev

# 纱线添加 --- -D

然后在/.js中添加..对应的配置如下：

= {

// ... : {

// ... : [

// ... [

'-',

: ,

: ,

： 真的，

: '-',

},

],

],

},

// ...}

// ...

每个组件的实现

完成

首先，让我们实现一个普通的登录按钮组件。创建src//目录并在其中创建.js。代码如下：

芋头来自“@/taro”

{ } 来自 'taro-ui'

() {

（

正常登录

我们使用了Taro UI的组件，定义了一个事件，后面使用的时候会传入该事件。

完成

然后我们实现微信登录按钮。创建src//目录并在其中创建.js和.scss。 .js代码如下：

太郎，{ } 来自“@/taro”

{ } 从 '@/'

'./.scss'

() {

[,] = ()

（五）{

（真的）

{ , } = e..

.(,)

()

（

=“”

={}

类型=“”

=“-”

={}

微信登录

可以看到，微信登录按钮比之前的普通登录按钮多了很多功能：增加了状态提示是否正在等待登录，以及修改状态的功能

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

新增（微信开放能力）属性。这里我们输入（获取用户信息）。查看所有支持的开放类型，请查看微信开放文档对应部分。

添加这个是为了编写获取用户信息后的处理逻辑。这是刚刚实施的内容。

.scss代码如下：

.-{

：100%；

-顶部