微信登录功能开发

api/index.tsx

@@ -8,9 +8,34 @@ export interface RegionResp {
   pid: number;
 }
 
+export interface UserInfoParams {
+  userAccountId: number;
+}
+
+export interface UserInfoResp {
+  id: number;
+  accountType: number;
+  uid: string;
+  phoneNum: string;
+  userName: string;
+  nickName: string;
+  userImg: string;
+  userSex: number;
+  email: string;
+  source: number;
+  accountStatus: number;
+  remark: string;
+  portType: number;
+  createTime: string;
+}
+
 export default {
   //获取区域数据
   region: (): Promise<Response<Array<RegionResp>>> => {
     return request("/pms/webDevice/getSecondDistrictInfo");
   },
+  //获取用户基本信息
+  userInfo: (params: UserInfoParams): Promise<Response<UserInfoResp>> => {
+    return request("/userapp/user-account/info", "get", params, {});
+  },
 };

components/NavHeader/index.module.scss

@@ -78,8 +78,4 @@
   background: none;
 }
 
-.headImg {
-  width: 48px;
-  height: 48px;
-  background: #ffffff;
-}
+

components/loginModal/index.tsx

-import React, { useState } from "react";
-import { Modal } from "antd";
+import React, { useEffect, useState } from "react";
+import { AutoComplete, Modal } from "antd";
 import Image from "next/image";
 
-
 type Props = {
   open: boolean;
   onCancel: () => void;
 };
 
 export default function loginModal(props: Props) {
+  useEffect(() => {
+    if (props.open) {
+      var obj = new window.WxLogin({
+        self_redirect: true,
+        id: "login_container",
+        appid: "wx18b7883acd204278",
+        scope: "snsapi_login",
+        redirect_uri: encodeURIComponent("https://iuav.mmcuav.cn/"),
+        state: "",
+        style: "",
+        href: "",
+      });
+    }
+  }, [props.open]);
+
   return (
     <>
       <Modal
@@ -30,16 +44,13 @@ export default function loginModal(props: Props) {
         >
           欢迎来到云享飞
         </div>
-        <Image
-          alt=""
-          src=""
-          width={160}
-          height={160}
-          style={{ margin: "auto", display: "block" }}
-        ></Image>
+        <div
+          id="login_container"
+          style={{ margin: "auto", display: "table" }}
+        ></div>
         <div
           style={{
-            marginTop: 39,
+            marginTop: -120,
             marginBottom: 52,
             fontSize: 14,
             fontFamily: "MicrosoftYaHei",

lib/hooks.js

-/* import { useEffect } from "react";
-import Router from "next/router";
-import request from '~/api/request';
-import useSWR, { SWRResponse } from "swr"; */
+import { useEffect, useState } from "react";
+import api, { UserInfoResp } from "~/api";
 /* 
 const fetcher = (url) =>
   fetch(url)
@@ -10,24 +8,18 @@ const fetcher = (url) =>
       return { user: data?.user || null };
     }); */
 
-export function useUser({ redirectTo, redirectIfFound } = {}) {
-  return {};
- /*  const { data, error } = useSWR("/api/user", request);
-  const user = data?.user;
-  const finished = Boolean(data);
-  const hasUser = Boolean(user);
+export function useUser() {
+  const [user, setUser] = useState(null);
 
   useEffect(() => {
-    if (!redirectTo || !finished) return;
-    if (
-      // If redirectTo is set, redirect if the user was not found.
-      (redirectTo && !redirectIfFound && !hasUser) ||
-      // If redirectIfFound is also set, redirect if the user was found
-      (redirectIfFound && hasUser)
-    ) {
-      Router.push(redirectTo);
-    }
-  }, [redirectTo, redirectIfFound, finished, hasUser]);
+    api
+      .userInfo({
+        userAccountId: 0,
+      })
+      .then((res) => {
+        setUser(res.result);
+      });
+  }, []);
 
-  return error ? null : user; */
+  return user;
 }

pages/_app.page.tsx

@@ -4,6 +4,8 @@ import type { AppProps } from 'next/app';
 import withTheme from '../theme';
 import { message } from 'antd';
 import { useEffect } from 'react';
+import Head from "next/head";
+import Script from 'next/script';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [messageApi, contextHolder] = message.useMessage();
@@ -14,6 +16,13 @@ export default function App({ Component, pageProps }: AppProps) {
   
   return withTheme(
     <>
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1"
+        ></meta>
+      </Head>
+      <Script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></Script>
       {contextHolder}
       <Component {...pageProps} />
     </>

typings/type.d.ts

@@ -3,5 +3,6 @@ import { MessageInstance } from 'antd/es/message/interface';
 declare global {
   interface Window {
     messageApi: MessageInstance;
+    WxLogin: any;
   }
 }