1. 微信开发平台注册https://open.weixin.qq.com/

2. 账号中心-填写基本资料（最好是公司注册）

3. 账号中心-开发者资质认证（充钱，300）

4. 审核通过之后，管理中心-网站应用-创建网站应用（AppSecret一定一定得记下来，不能放在前端，放在后端）
   
   4步骤完成后会生成应用的appid

5. 资源中心-网站应用（查看方法）
   

6. 在umi+react项目中扫码登录方法及踩坑：微信登录二维码内嵌到自己页面

   6.1 内置 js 文件（config.js）
   6.1.1能连网的情况下

export default defineConfig({...，headScripts: [`http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'],
});

6.1.2 如果是内网环境，能连网时，在浏览器打开http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
复制打开的内容；在 public 目录下新建wxLogin.js，将内容放进wxLogin.js

export default defineConfig({...，headScripts: [`./wxLogin.js'],
});

6.2 配置实例化调用方法并在登录页面 useEffect 生命周期调用

var obj = new WxLogin({self_redirect:true,id:"login_container", //你要放二维码的dom节点div的idappid: "", scope: "", redirect_uri: "",state: "",style: "",href: ""});

其中 state 动态生成（后端接口返回），可以防止cfrs攻击 什么是 cfrs？
其中 href 可以修改二维码页面的样式 （写好 css 使用 Base64 在线编码）工具

可以使用base64对css样式进行编码，前面拼接"data:text/css;base64,"
示例："data:text/css;base64,LmltcG93ZXJCb3h7IHRleHQtYWxpZ246bGVmdH0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4OyBtYXJnaW46MH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="

6.3 https网站时： iframe 报错 Unsafe attempt to initiate navigation for frame with origin
原因：这个错误通常是因为在安全性方面的限制而产生的，这是浏览器的一种安全特性，用来防止恶意网站通过 iframe 或其他方式导航到其他网站。
解决方案：修改下载下来的 wxLogin.js

!function (e, t) {e.WxLogin = function (e) {var r = "default";!0 === e.self_redirect? r = "true" :!1 === e.self_redirect && (r = "false");var n = t.createElement("iframe"),i = "https://open.weixin.qq.com/connect/qrconnect?appid=" + e.appid + "&scope=" + e.scope + "&redirect_uri=" + e.redirect_uri + "&state=" + e.state + "&login_type=jssdk&self_redirect=" + r + "&styletype=" + (e.styletype || "") + "&sizetype=" + (e.sizetype || "") + "&bgcolor=" + (e.bgcolor || "") + "&rst=" + (e.rst || "");i += e.style? "&style=" + e.style : "",i += e.href? "&href=" + e.href : "",i += "en" === e.lang? "&lang=en" : "",n.src = i,n.frameBorder = "0",n.allowTransparency = "true",n.sandbox = "allow-scripts allow-top-navigation allow-same-origin", // 添加这行代码！！n.scrolling = "no",n.width = "300px",n.height = "400px";var s = t.getElementById(e.id);s.innerHTML = "",s.appendChild(n)}
}(window, document);

6.4 hash路由出现 localhost:8000/?code=code&state=state/#/user/login

function fixUrl(url) {// 使用正则表达式提取IP、参数和哈希路由const matches = url.match(/^([^?#]+)(\?[^#]*)?(#.*)?$/);if (!matches) {return url; // 如果匹配失败，返回原始 URL}const [, baseUrl, queryParams, hashRoute] = matches;// 重新拼接 URLlet fixedUrl = baseUrl + '#';if (hashRoute) {fixedUrl += hashRoute.replace(/^#/, ''); // 去除哈希路由前的 #}if (queryParams) {fixedUrl += '?' + queryParams.replace(/^\?/, ''); // 去除参数前的 ?}return fixedUrl;
}function fixHashUrlAndJump() {if (location.href.includes(`/?code`)) {const currectpath = fixUrl(location.href);location.href = currectpath;return true;} else {return false;}
}useEffect(async () => {if (fixHashUrlAndJump()) {return;}const arrays = location?.hash?.split('?');const params = new URLSearchParams(arrays[1]);const code = params.get('code');const state = params.get('state');if (!code || !state) {return;}
},[]);