tiefen_space_web/components/InOtherApp/index.jsx

"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_CDN_URL + "/public/images/arrow.png"}
          alt=""
        />
      </div>
      <p className="text-white text-2xl font-medium text-center">
        请前往浏览器打开
      </p>
    </div>
  );
}