Home Explore Help
Sign In
guoziyun
/
artsite
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix

guoziyun 10 months ago
parent
5710dcec57
commit
da49f82544
2 changed files with 162 additions and 15 deletions
Unified View Show Diff Stats
  1. 150 3
      views/v2/share-simple.ejs
  2. 12 12
      views/v2/share.ejs

+ 150 - 3
views/v2/share-simple.ejs
View File 

@@ -17,26 +17,35 @@
 
   <meta name="description" content="<%= translate.colorRelex[lang] %>">
 
   <meta name="description" content="<%= translate.colorRelex[lang] %>">
 
   <meta name="keywords" content="color, paint, app, ios, android, game">
 
   <meta name="keywords" content="color, paint, app, ios, android, game">
 
 
 
+
 
   <meta property="og:site_name" content="art.pcoloring.com">
 
   <meta property="og:site_name" content="art.pcoloring.com">
 
   <meta property="og:title" content="Art Color">
 
   <meta property="og:title" content="Art Color">
 
   <meta property="og:description" content="<%= translate.colorRelex[lang] %>">
 
   <meta property="og:description" content="<%= translate.colorRelex[lang] %>">
 
   <meta property="og:image" content="<%= imageUrl %>">
 
   <meta property="og:image" content="<%= imageUrl %>">
 
   <meta property="og:type" content="website">
 
   <meta property="og:type" content="website">
 
-
 
   <meta property="og:url" content="<%= applink %>" />
 
   <meta property="og:url" content="<%= applink %>" />
 
+
 
+  <!-- =============== 新增: Facebook App Links 元标签 =============== -->
 
+  <meta property="fb:app_id" content="2402037183154121" />
 
+  <meta property="al:web:should_fallback" content="false" />
 
+
 
+  <meta property="al:web:url" content="<%= applink %>" />
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <meta property="al:ios:url" content="<%= applink %>" />
 
   <meta property="al:ios:app_store_id" content="1575480118" />
 
   <meta property="al:ios:app_store_id" content="1575480118" />
 
   <meta property="al:ios:app_name" content="Art Color" />
 
   <meta property="al:ios:app_name" content="Art Color" />
 
-
 
-  <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" />
 
   <meta property="al:android:url" content="<%= applink %>" />
 
   <meta property="al:android:url" content="<%= applink %>" />
 
+  <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" />
 
   <meta property="al:android:app_name" content="Art Color" />
 
   <meta property="al:android:app_name" content="Art Color" />
 
+  <meta property="al:android:class" content="YOUR_ANDROID_MAIN_ACTIVITY_CLASS" />
 
 
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
   <meta name="apple-itunes-app" content="app-id=1575480118">
 
 
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/icon.png">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/icon.png">
 
 
 
+  <script type="module" crossorigin src="/assets/share-DDyw1eeR.js"></script>
 
+  <link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
 
+  <link rel="modulepreload" crossorigin href="/assets/WorkLayer-RuTV64WF.js">
 
 
 
   <style>
 
   <style>
 
     :root {
 
     :root {
 
@@ -74,6 +83,18 @@
 
       z-index: 100;
 
       z-index: 100;
 
     }
 
     }
 
 
 
+    /* 图片加载前隐藏，避免破碎的加载体验 */
 
+    #header {
 
+      opacity: 0;
 
+      transition: opacity 0.3s ease;
 
+      /* 加载完成后淡入 */
 
+    }
 
+
 
+    /* 图片加载完成后显示 */
 
+    #header.loaded {
 
+      opacity: 1;
 
+    }
 
+
 
     .app-icon {
 
     .app-icon {
 
       display: flex;
 
       display: flex;
 
       justify-content: center;
 
       justify-content: center;
 
@@ -194,6 +215,17 @@
 
       z-index: 100;
 
       z-index: 100;
 
     }
 
     }
 
 
 
+    /* buttons 淡入 */
 
+    #buttons {
 
+      opacity: 0;
 
+      transition: opacity 0.3s ease;
 
+    }
 
+
 
+    /* 图片加载完成后显示 */
 
+    #buttons.loaded {
 
+      opacity: 1;
 
+    }
 
+
 
 
 
     .btn {
 
     .btn {
 
       display: inline-block;
 
       display: inline-block;
 
@@ -334,6 +366,9 @@
 
 </script>
 
 </script>
 
 
 
 <body>
 
 <body>
 
+  <div class="image-placeholder" id="imagePlaceholder">
 
+    <div class="loading-spinner"></div>
 
+  </div>
 
   <div id="header" class="header-container">
 
   <div id="header" class="header-container">
 
     <div class="app-icon">
 
     <div class="app-icon">
 
       <a href="/"><img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo"></a>
 
       <a href="/"><img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo"></a>
 
@@ -341,6 +376,13 @@
 
     <div class="app-title">Art Color</div>
 
     <div class="app-title">Art Color</div>
 
   </div>
 
   </div>
 
 
 
+  <div class="image-canvas-container">
 
+    <img id="poster-img" src="<%= imageUrl %>" alt="Art Color" />
 
+    <canvas id="canvas"></canvas>
 
+    <div id="play-button" class="play-button"></div>
 
+  </div>
 
+
 
+
 
   <div id="buttons" class="buttons">
 
   <div id="buttons" class="buttons">
 
     <a href="<%= openapplink %>" target="_blank" class="btn btn-primary">
 
     <a href="<%= openapplink %>" target="_blank" class="btn btn-primary">
 
       <%= translate.colorNow[lang] %>
 
       <%= translate.colorNow[lang] %>
 
@@ -361,6 +403,111 @@
 
   </div>
 
   </div>
 
 
 
   <script>
 
   <script>
 
+    // =============== 新增: Facebook App Links SDK ===============
 
+    (function (d, s, id) {
 
+      var js, fjs = d.getElementsByTagName(s)[0];
 
+      if (d.getElementById(id)) return;
 
+      js = d.createElement(s); js.id = id;
 
+      js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0&appId=2402037183154121";
 
+      fjs.parentNode.insertBefore(js, fjs);
 
+    }(document, 'script', 'facebook-jssdk'));
 
+    // =============== Facebook App Links SDK 结束 ===============
 
+
 
+    // claim bonus 超过1秒自动跳转到下载页
 
+    document.addEventListener('DOMContentLoaded', function () {
 
+      // 检查 URL 中是否包含 check=1 参数
 
+      const urlParams = new URLSearchParams(window.location.search);
 
+      const hasCheckParam = urlParams.has('check');
 
+      // 定义下载页面 URL（与 Download App 按钮保持一致）
 
+      const downloadUrl = document.querySelector('.btn-secondary').href;
 
+
 
+      // =============== 新增: Facebook 应用内浏览器检测 ===============
 
+      const isFacebookBrowser = navigator.userAgent.match(/FBAN|FBAV/i);
 
+
 
+      if (isFacebookBrowser) {
 
+        console.log("检测到Facebook应用内浏览器");
 
+        // 添加Facebook特定的处理逻辑
 
+      }
 
+      // =============== Facebook 检测结束 ===============
 
+
 
+
 
+      // 如果是带 check 参数的页面，则执行拉起检测逻辑
 
+      if (hasCheckParam) {
 
+        let appLaunched = false;
 
+
 
+        // 监听页面可见性变化（判断 App 是否被拉起）
 
+        document.addEventListener('visibilitychange', function () {
 
+          if (document.hidden) {
 
+            // 页面被隐藏，说明 App 可能被成功拉起
 
+            appLaunched = true;
 
+          }
 
+        });
 
+
 
+        // 监听页面焦点变化（辅助判断）
 
+        window.addEventListener('blur', function () {
 
+          appLaunched = true;
 
+        });
 
+
 
+        // 通用下载页，一般是在pc浏览器而非android/ios环境，直接跳转，不用等待
 
+        if (downloadUrl === 'https://art.pcoloring.com/app') {
 
+          window.location.href = downloadUrl;
 
+        } else {
 
+          // 1 秒后检查是否成功拉起 App
 
+          setTimeout(function () {
 
+            if (!appLaunched) {
 
+              // =============== 修改: 针对Facebook浏览器优化跳转逻辑 ===============
 
+              if (isFacebookBrowser) {
 
+                // 在Facebook浏览器中，使用更明显的跳转方式
 
+                window.location.href = "intent://" + "<%= applink %>".replace(/^https?:\/\//, "") + "#Intent;scheme=https;package=com.pcoloring.art.puzzle.color.by.number;end";
 
+              } else {
 
+                window.location.href = downloadUrl;
 
+              }
 
+            }
 
+          }, 500);
 
+        }
 
+
 
+      }
 
+
 
+      // 为 Color Now 按钮添加防重复点击逻辑（可选）
 
+      const colorNowButton = document.querySelector('.btn-primary');
 
+      if (colorNowButton) {
 
+        colorNowButton.addEventListener('click', function (e) {
 
+          // 只有在没有 check 参数时才允许跳转（避免循环跳转）
 
+          if (!hasCheckParam) {
 
+            // 可添加加载状态
 
+            this.textContent = 'Launching...';
 
+            this.disabled = true;
 
+          }
 
+        });
 
+      }
 
+
 
+    });
 
+
 
+
 
+    // 图片加载逻辑
 
+    const header = document.getElementById('header');
 
+    const posterImg = document.getElementById('poster-img');
 
+    const imagePlaceholder = document.getElementById('imagePlaceholder');
 
+    const buttons = document.getElementById('buttons');
 
+
 
+    // 图片加载完成后
 
+    posterImg.onload = function () {
 
+      // header淡入
 
+      header.classList.add('loaded');
 
+      // 标记图片已加载，触发 CSS 淡入效果
 
+      posterImg.classList.add('loaded');
 
+      // buttons淡入
 
+      buttons.classList.add('loaded');
 
+      // 隐藏占位符
 
+      if (imagePlaceholder) {
 
+        imagePlaceholder.style.display = 'none';
 
+      }
 
+    };
 
+
 
+    // 图片加载失败时（备选方案）
 
+    posterImg.onerror = function () {
 
+      imagePlaceholder.innerHTML = '<p>图片加载失败</p>'; // 显示错误提示
 
+    };
 
 
 
     const wechatGuideOverlay = document.getElementById('wechat-guide-overlay');
 
     const wechatGuideOverlay = document.getElementById('wechat-guide-overlay');

+ 12 - 12
views/v2/share.ejs
View File 

@@ -439,18 +439,18 @@
 
 
 
       }
 
       }
 
 
 
-      // // 为 Color Now 按钮添加防重复点击逻辑（可选）
 
-      // const colorNowButton = document.querySelector('.btn-primary');
 
-      // if (colorNowButton) {
 
-      //   colorNowButton.addEventListener('click', function (e) {
 
-      //     // 只有在没有 check 参数时才允许跳转（避免循环跳转）
 
-      //     if (!hasCheckParam) {
 
-      //       // 可添加加载状态
 
-      //       this.textContent = 'Launching...';
 
-      //       this.disabled = true;
 
-      //     }
 
-      //   });
 
-      // }
 
+      // 为 Color Now 按钮添加防重复点击逻辑（可选）
 
+      const colorNowButton = document.querySelector('.btn-primary');
 
+      if (colorNowButton) {
 
+        colorNowButton.addEventListener('click', function (e) {
 
+          // 只有在没有 check 参数时才允许跳转（避免循环跳转）
 
+          if (!hasCheckParam) {
 
+            // 可添加加载状态
 
+            this.textContent = 'Launching...';
 
+            this.disabled = true;
 
+          }
 
+        });
 
+      }
 
 
 
     });
 
     });