欢迎继续阅读《Taro 小程序开发大型实战》系列,前情回顾:在第一篇中,我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型:Taro 小程序开发大型实战(一):熟悉的 React,熟悉的 Hookszhuanlan.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