写在前面:同之前分享的钉钉扫码登录一样,前期准备工作就不说了,官网写的很清楚,这是一个 传送门
直接来看在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这样才行。也是个坑吧,记录一下。