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

最新推荐文章于 2024-08-13 12:13:52 发布

北鼻娃

最新推荐文章于 2024-08-13 12:13:52 发布

阅读量5.1k

点赞数 5

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/qq_43315343/article/details/114935202

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
    <title>登录</title>
    //  引入文件
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

接下来，新建微信扫码组件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 <div id='login' ></div>
    }
}

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

北鼻娃

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
React项目中第三方使用微信扫码登录

写在前面：同之前分享的钉钉扫码登录一样，前期准备工作就不说了，官网写的很清楚，这是一个传送门直接来看在react项目中咋使用。首先，还是在Index.html文件中引入js<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,
复制链接

扫一扫

专栏目录