增加在webview打开时，“前往浏览器打开”的提示

2024-09-06 10:34:44 +03:00 · 2024-09-06 10:34:44 +03:00 · 64f97e6c17
parent b3d0cc0640
commit 64f97e6c17
3 changed files with 42 additions and 0 deletions
--- a/app/layout.js
+++ b/app/layout.js
@ -7,6 +7,8 @@ import BottomNav from "../components/BottomNav";
 import { Provider } from "react-redux";
 import store from "../store";
 import withAuth from "@/components/WithAuth";
+import InOtherApp from "@/components/InOtherApp";
+
 const inter = Inter({ subsets: ["latin"] });

 const metadata = {
@ -229,6 +231,7 @@ export default function RootLayout({ children }) {
      <body className={`${inter.className} h-full`}>
        <main className={`w-full bg-deepBg h-full`}>
          <div id="maskDomBox"></div>
+          <InOtherApp />
          {withAuth(
            <Provider store={store}>
              <div>
--- a/components/InOtherApp/index.js
+++ b/components/InOtherApp/index.js
@ -0,0 +1,39 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+export default function InOtherApp() {
+  //区分是否在微信/微博/qq/支付宝/钉钉内置浏览器中打开
+  const [isInOtherApp, setIsInOtherApp] = useState(false);
+  useEffect(() => {
+    const userAgent = navigator.userAgent.toLowerCase();
+    let temIsInOtherApp =
+      userAgent.match(/MicroMessenger/i) == "micromessenger" ||
+      userAgent.match(/WeiBo/i) == "weibo" ||
+      (userAgent.indexOf("qq") !== -1 &&
+        userAgent.indexOf("mqqbrowser") === -1) ||
+      /alipay/gi.test(userAgent) ||
+      userAgent.indexOf("dingtalk") !== -1;
+    if (temIsInOtherApp) {
+      setIsInOtherApp(true);
+    }
+  }, []);
+
+  if (!isInOtherApp) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-0 left-0 w-full h-full bg-[#000000B2] z-50">
+      <div className="flex justify-end pt-4 pr-4">
+        <img
+          src={process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/images/arrow.png"}
+          alt=""
+        />
+      </div>
+      <p className="text-white text-2xl font-medium text-center">
+        请前往浏览器打开
+      </p>
+    </div>
+  );
+}
--- a/public/images/arrow.png
+++ b/public/images/arrow.png