1.需要在微信开发者后台申请注册拿到appid和secret
2.用webview或者iframe嵌套微信官方提供的动态获取二维码的路径
const URL= https://open.weixin.qq.com/connect/qrconnect?appid=${你的appid}&response_type=code&scope=snsapi_login&lang=zh_CN&redirect_uri=${你扫码成功之后需要重定向的路由页面}&state=&login_type=jssdk&self_redirect=false&sizetype=1
3.iframe可以直接修改css样式，但是webview看不到dom节点无法直接修改样式，可通过
webview.insertCSS(`
.impowerBox {
height: 100px !important;
}
`)
4.如果你需要扫码成功之后做处理，比如说redirect_uri不跳转重定向路由页面，我们可以通过webview的监听函数做处理
webview = document.getElementById('foo') as any
const [showWebview, setWebview] = useState(true)
webview.addEventListener('dom-ready', () => {
// 可插入css样式修改原生的二维码样式
})
webview.addEventListener("did-start-loading", () => {
// 控制webview的显隐，开始显示，stop的时候隐藏（有code不隐藏，没code才隐藏）
setWebview(false)
})
webview.addEventListener("did-stop-loading", () =>{
const code = parseURL(webview.src).params?.code
if (code) {
// code就是微信扫码之后的唯一标识code，可在微信提供的api拿这个code去获取需要的用户信息 accessToken openid unionId都能拿到
} else {
setWebview(true)
}
// parseURL 自己写，用来转换webview.src的参数格式
})
// dom节点
{
!showWebview ? <Spin indicator={<LoadingOutlined style={{fontSize: 40}} spin />}></Spin> : null
}
<webview className={showWebview ? '' : 'hide '} id="foo" src={URL}> </webview>
