test

src/pages/user/index.tsx

@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { List } from './edit/List';
 import { Main } from './layouts';
 import { Login } from './login/Login';
+import { Login as WxLogin } from './wx/Login';
 import { Profile } from './edit/Profile';
 export const App = () => {
   return (
@@ -12,6 +13,7 @@ export const App = () => {
         <Route path='profile' element={<Profile />} />
       </Route>
       <Route path='login' element={<Login />} />
+      <Route path='wx/login' element={<WxLogin />} />
     </Routes>
   );
 };

src/pages/user/wx/Login.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { setWxerwma, wxId } from './wx-login';
+
+export const Login = () => {
+  useEffect(() => {
+    setWxerwma();
+  }, []);
+  return <div id={wxId} className='max-w-sm mx-auto bg-white rounded-lg text-center -mb-16'></div>;
+};

src/pages/user/wx/wx-login.ts

@@ -0,0 +1,32 @@
+export const createLogin = async () => {
+  // const redirect_uri = 'http://localhost:6024/user/login'
+  // let redirect_uri = 'https://envision.xiongxiao.me/api/wx/login'
+  let redirect_uri = 'https://wx.xiongxiao.me/wechat';
+  // @ts-ignore
+  const obj = new WxLogin({
+    self_redirect: false,
+    id: 'weixinLogin', // 需要显示的容器id
+    appid: 'wxd6b9a48bf5468de9', // 微信开放平台appid wx*******
+    scope: 'snsapi_login', // 网页默认即可 snsapi_userinfo
+    redirect_uri: encodeURIComponent(redirect_uri), // 授权成功后回调的url
+    state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
+    style: '', // 提供"black"、"white"可选。二维码的样式
+    href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7bWFyZ2luLXRvcDowO30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30=', // 外部css文件url，需要https
+  });
+  return obj;
+};
+export const wxId = 'weixinLogin';
+export function setWxerwma() {
+  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();
+    return;
+  }
+  const wxElement = document.body.appendChild(s);
+  wxElement.onload = function () {
+    createLogin();
+  };
+}