type WxLoginConfig = { redirect_uri?: string; appid?: string; scope?: string; state?: string; style?: string; }; export const createLogin = async (config?: WxLoginConfig) => { let redirect_uri = config?.redirect_uri; const { appid } = config || {}; if (!redirect_uri) { redirect_uri = window.location.href; } const url = new URL(redirect_uri); // remove code and state params url.searchParams.delete('code'); url.searchParams.delete('state'); redirect_uri = url.toString(); console.log('redirect_uri', redirect_uri); if (!appid) { console.error('appid is not cant be empty'); return; } // @ts-ignore const obj = new WxLogin({ self_redirect: false, id: 'weixinLogin', // 需要显示的容器id appid: appid, // 微信开放平台appid wx******* scope: 'snsapi_login', // 网页默认即可 snsapi_userinfo redirect_uri: encodeURIComponent(redirect_uri), // 授权成功后回调的url state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验 stylelite: true, // 是否使用简洁模式 // https://juejin.cn/post/6982473580063752223 href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9" }); const login = document.querySelector('#weixinLogin') if (login) { // login 下的 iframe 样式调整 const iframe = login.querySelector('iframe'); if (iframe) { // iframe.style.width = '200px'; iframe.style.height = '300px'; } } return obj; }; export const wxId = 'weixinLogin'; export function setWxerwma(config?: WxLoginConfig) { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'; s.id = 'weixinLogin-js'; if (document.getElementById('weixinLogin-js')) { createLogin(config); return; } const wxElement = document.body.appendChild(s); wxElement.onload = function () { createLogin(config); }; }