微信扫码登录 iframe 跳走是因为未正确配置 self_redirect: false 且直接嵌入 open.weixin.qq.com；必须用 wxLogin.js，通过 postMessage 通信，并严格校验 redirect_uri 和 state。
iframe嵌入微信扫码登录页面时，为什么页面会跳走而不是留在当前页
因为微信官方二维码页（https://open.weixin.qq.com/connect/qrconnect）默认行为是：用户授权成功后，直接在 iframe 内部重定向到你的 redirect_uri。浏览器会把这次跳转当作整个 iframe 的导航，而不会通知父页面——除非你主动拦截并响应。
常见错误是只加了 <iframe src="..."> 就以为完事，结果扫码授权后整个 iframe 变成空白或跳到回调页，父页面毫无感知。
- 必须设置
self_redirect: false（用WxLoginSDK 时），否则 iframe 内部会自己跳走 - 不能手动写
<iframe src="https://open.weixin.qq.com/...">—— 微信不支持直接 iframe 嵌入该地址，会拒绝加载或报错Refused to display ... in a frame - 正确做法是用微信提供的
wxLogin.js，它内部用 iframe 加载一个中转页（非直连 open.weixin.qq.com），再通过postMessage与父页通信
WxLogin.js 初始化时 self_redirect 和 redirect_uri 怎么配才不跳失
self_redirect 控制的是“授权成功后，跳转发生在 iframe 内部，还是由父页面主动接管”。设为 false（默认）才能让父页拿到 code 并自行处理；设为 true 就等于放弃控制权，iframe 自己跳到 redirect_uri，父页无法拦截或校验协议勾选状态。
redirect_uri 必须和微信开放平台后台填写的**完全一致**：协议、域名、端口、路径、末尾斜杠、甚至 URL 编码方式都不能差——比如填了 https://example.com/auth，就不能在代码里传 https://example.com/auth/（多一个斜杠）。
立即学习“前端免费学习笔记（深入）”；
让 AI 读懂微信公众号。自研 7 阶段提取管道，穿透反爬率 99.89%，Token 消耗降低 50%–87%。支持 ChatGPT、Claude、Perplexity、Gemini 等平台无缝引用。
-
redirect_uri要encodeURIComponent一次，但不是对整个 URL 编码，而是只编码其作为参数值的部分（如传给WxLogin构造函数时） -
state必须传且带业务上下文，比如state=login%3Aabc123，后端要原样比对，防止 CSRF - 如果用 Vue/React，确保容器 DOM 元素（如
id="qrcode"）在调用new WxLogin(...)时已真实挂载，否则 SDK 找不到宿主节点，静默失败
扫码后父页面收不到回调，常见断点在哪
不是后端没返回，而是前端根本没监听到消息。微信 SDK 在 iframe 加载完成后，会向父窗口发 postMessage，内容含 code 和 state。父页若没监听或监听逻辑有误，就卡在“二维码一直转圈”。
关键检查点：
- 确认回调页（即
redirect_uri指向的页面）本身是空壳 HTML，只做一件事：取 URL 中的code和state，然后window.parent.postMessage({code, state}, "*") - 父页监听必须在全局作用域（不能在组件
mounted后才绑），且 origin 校验要宽松：微信 iframe 发来的消息 origin 是https://wx.qq.com或https://open.weixin.qq.com，不能写死成你的域名 - 浏览器控制台看 Network 面板：扫码后是否真发出了请求到你的
redirect_uri？如果没有，说明微信没跳转，大概率是redirect_uri白名单没配对或未 URL 编码 - 不要依赖
onReady回调判断“二维码已就绪”——它只表示 iframe DOM 加载完成，不代表微信服务可用；真正可靠的是监听message事件后收到有效code
为什么用户取消勾选协议后，登录流程仍继续执行
因为协议勾选状态是前端维护的，而扫码授权和回调是独立触发的。一旦微信 iframe 发来 postMessage，父页若没在收到消息时实时校验勾选状态，就会直接走后续逻辑。
典型错误写法是：监听到 message → 立即发请求换 access_token → 后端返回用户信息 → 登录成功。中间没插一句 if (!agreedToTerms) return。
- 必须把协议状态（如
isAgreed）放在闭包或响应式变量中，并在message处理函数第一行检查 - 不要用
setTimeout延迟校验——用户可能在扫码后、回调前快速取消勾选，延迟会导致竞态 - 更稳妥的做法：回调页不直接
postMessage，而是先发个轻量请求到后端校验协议状态，后端返回{ ok: true }后再通知父页，把校验逻辑下沉
最易被忽略的一点：微信扫码登录的整个链路里，前端能干预的只有展示和响应，所有鉴权、票据签发、用户绑定都必须由后端完成。前端哪怕加了十层校验，只要后端没做对应防护，照样白搭。
