React项目中第三方使用微信扫码登录

2024-06-10 10:31| 来源: 网络整理| 查看: 265

写在前面：同之前分享的钉钉扫码登录一样，前期准备工作就不说了，官网写的很清楚，这是一个传送门直接来看在react项目中咋使用。我的思路：微信扫码是一个新的组件，通过外部传入的visible来控制出现还是消失（点击一个按钮出现扫码组件）。扫码组件在页面挂载后开始实例一个JS对象，生成专属于你们这个项目的二维码，然后手机扫码确认登录后，当前页面地址栏参数会发生变化，拿到需要的参数去进行你需要的操作。

首先，还是在Index.html文件中引入js

接下来，新建微信扫码组件WxLoginCode.jsx

import React from 'react' import util from '../../util/util'; export default class WxLoginCode extends React.Component { constructor(props) { super(props) this.state = { // 一个appid对应一个回调地址 APPID: YOUR_APPID, // 扫码成功后要跳转的页面 REDIRECT_URI: encodeURIComponent(YOUR_URL) } } componentDidMount() { var obj = new window.WxLogin({ self_redirect: false, id: "login", appid: this.state.APPID, scope: "snsapi_login", redirect_uri: this.state.REDIRECT_URI, state: "", style: "", href: "" }); // 监听页面地址栏url的改变获取参数code window.onhashchange = () => { //用一个方法拿到当前地址的参数 let params = util.getQueryParams(this.props.history.location.search); // 扫码成功后地址栏会拼上一个code参数 if (params.code || params['?code']) { let code = params.code ? params.code : params['?code'] // 拿到参数去做你自己的操作 //我们项目中是先调用一个接口来获取用户信息（后台提供），然后调用登录接口进入系统 // ......... } } } render() { return } }

写在后面：当时在做这个时候，按照官网文档new WxLogin这样实例js对象总是不行，说找不到WxLogin，查了下说是因为引入的js在react中是挂在window对象下，得new window.WxLogin这样才行。也是个坑吧，记录一下。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章