微信小程序分享相关内容

2566820f · yangyajing · 17074b9d · 2566820f · 2566820f · 2566820f
Commit 2566820f authored Jan 07, 2026 by yangyajing
Showing with 114 additions and 50 deletions

index.html index.html +2 -0

package-lock.json package-lock.json +8 -1

package.json package.json +2 -1

App.jsx src/App.jsx +92 -47

index.css src/index.css +3 -1

vite.config.js vite.config.js +7 -0

No files found.
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <meta name="keywords" content="明树,北京明树,明树数据,北京明树数据,数据服务,PPP咨询,Bridata,北京明树数据科技有限公司" />
+    <meta name="description" content="北京明树数据科技有限公司（明树数据），专注公共数据和企业数据资产开发利用全周期服务，将大数据和人工智能技术与行业经验深度融合，开创“数据+软件+咨询”的全新模式，深度挖掘数据要素在不同场景的应用价值，为政府部门、企业、社会资本、平台公司和金融机构提供数字化转型、数据治理、数据资产入表、数据产品开发、数据资产管理运营、项目投融资咨询和融资化债等服务。"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>明树数据</title>
  </head>

--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
        "html2canvas": "^1.4.1",
        "lucide-react": "^0.555.0",
        "react": "^19.2.0",
-        "react-dom": "^19.2.0"
+        "react-dom": "^19.2.0",
+        "weixin-js-sdk": "^1.6.5"
      },
      "devDependencies": {
        "@eslint/js": "^9.39.1",
@@ -3749,6 +3750,12 @@
        }
      }
    },
+    "node_modules/weixin-js-sdk": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/weixin-js-sdk/-/weixin-js-sdk-1.6.5.tgz",
+      "integrity": "sha512-Gph1WAWB2YN/lMOFB/ymb+hbU/wYazzJgu6PMMktCy9cSCeW5wA6Zwt0dpahJbJ+RJEwtTv2x9iIu0U4enuVSQ==",
+      "license": "MIT"
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
    "html2canvas": "^1.4.1",
    "lucide-react": "^0.555.0",
    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "weixin-js-sdk": "^1.6.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",

--- a/src/App.jsx
+++ b/src/App.jsx
 import React, { useState, useEffect, useRef } from 'react';
 import { Play, ArrowRight, Zap, Shield, Globe, Database, Activity, Cpu, Menu, X, ChevronRight, Server, Layers, Users, Rocket, Lock, BarChart3, Code, Briefcase, ExternalLink, ChevronLeft, CheckCircle2, Award, FileText, PieChart, Coins, FileCheck, Brain, LayoutGrid, Settings, TrendingUp, ChevronDown, FileCode, Monitor, Info, Truck, MessageCircle, Leaf, Zap as EnergyIcon, Beaker, Building2, Landmark, GraduationCap, Smartphone, CreditCard, Search, Calendar, Newspaper, Mic2, Handshake } from 'lucide-react';
-
+import wx from 'weixin-js-sdk';
 import html2canvas from 'html2canvas';
 //导入依赖，用于“转发至微信”处 DOM 转 Canvas，以实现自动将页面截图存入剪切板
 // 保留原有导入的组件（X、CheckCircle2、MessageCircle等）
@@ -1889,7 +1889,7 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
             </section>

             {/* 2. Scenario Highlights (Horizontal Scroll 6 items) */}
-             <section className="py-12 border-t border-white/5 relative z-10 overflow-hidden">
+             <section className="py-12 border-t border-white/5 relative z-10 overflow-hidden" id="yycj">
                 <div className="max-w-6xl mx-auto px-6">
                     <div className="mb-8 flex justify-between items-end">
                          <div>
@@ -2070,13 +2070,26 @@ const App = () => {
  const [selectedNews, setSelectedNews] = useState(null); // The item clicked in the News section
  const [activeServiceTab, setActiveServiceTab] = useState('consulting');
  const [showCopyToast, setShowCopyToast] = useState(false); 
-  const scrollContainerRef = useRef(null);
  const [showNewsTotal, setShownewsTotal] = useState(false);
+  const [consoleData, setConsoleData] = useState(null);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
+    const setMobileScroll = (id) => {
+      let element = document.getElementById(id);
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+      if (element && isMobile) {
+        setTimeout(() => {
+          window.scrollTo(0, element.offsetTop);
+        }, 500);
+      }
+    };
+    if (location.hash) {
+      let hash = location.hash.substring(2);
+      setMobileScroll(hash);
+    }
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
@@ -2099,6 +2112,23 @@ const App = () => {
  };

  const handleWeChatShare = async (type) => {
+    if ( type === "scenario" && window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
+      // 小程序环境中
+      wx.miniProgram.postMessage({
+          data: {
+            type: 'share',
+            path: '/pages/webview/webview?url=' + encodeURIComponent("http://192.168.12.77:5173/#/yycj"),
+            timestamp: Date.now()
+        }
+      })
+      setConsoleData({
+        text: "请点击右上角分享"
+      });
+      setShowCopyToast(true);
+      setTimeout(() => {
+        setShowCopyToast(false);
+      }, 1500);
+    } else {
      try {
        let modalElement = document.getElementById(type + '-modal');
        if (!modalElement) {
@@ -2118,7 +2148,6 @@ const App = () => {
        document.body.appendChild(modalElement);
        // DOM转Canvas
        const canvas = await html2canvas(modalElement);
-    document.body.removeChild(modalElement);
        // 转Blob并复制到剪贴板
        canvas.toBlob(async (blob) => {
          if (!blob) {
@@ -2127,11 +2156,14 @@ const App = () => {
          }
          const clipboardItem = new ClipboardItem({ 'image/png': blob });
          await navigator.clipboard.write([clipboardItem]);
+          setConsoleData({
+            text: "内容已复制",
+            subText: "请打开微信，粘贴并发送给好友"
+          })
          setShowCopyToast(true);
          setTimeout(() => {
            setShowCopyToast(false);
          }, 1500);
-      // alert('🎉 产品弹窗已转为图片并复制到剪贴板！\n可直接粘贴到微信聊天/朋友圈～');
        }, 'image/png', 1.0);
    
      } catch (error) {
@@ -2144,7 +2176,18 @@ const App = () => {
          alert(`复制失败：${error.message}`);
        }
      }
-};
+    }
+  };
+  const resetWeChatShare = () => {
+    // 重置分享信息
+    if ( window.__wxjs_environment === 'miniprogram' || /miniProgram/.test(navigator.userAgent)) {
+      wx.miniProgram.postMessage({
+          data: {
+            type: "default"
+          }
+      })
+    }
+  }

  // Render Content based on activeTab

@@ -2841,11 +2884,13 @@ const App = () => {
                         </div>
                         <h3 className="text-lg md:text-2xl font-bold text-white tracking-wide">{selectedScenario.title}</h3>
                    </div>
-                    <button onClick={() => setSelectedScenario(null)} className="p-2 hover:bg-white/10 rounded-full transition-colors">
+                    <button onClick={() => {
+                        setSelectedScenario(null);
+                        resetWeChatShare();
+                      }} className="p-2 hover:bg-white/10 rounded-full transition-colors">
                        <X className="w-5 h-5 md:w-6 md:h-6 text-gray-400 hover:text-white" />
                    </button>
                </div>
-
                <div className="p-4 md:p-8 overflow-y-auto flex-1">
                    {/* 1. Detail Text (No Header) */}
                    <div className="mb-6 md:mb-8">
@@ -3034,13 +3079,13 @@ const App = () => {

      {/* Global Toast */}
      {showCopyToast && (
-            <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#21242b] text-white px-8 py-6 rounded border border-[#00FFC2] shadow-[0_0_50px_rgba(0,0,0,0.8)] z-[300] flex flex-col items-center gap-4 animate-fade-in-up">
+            <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-[#21242b] text-white px-8 py-6 rounded border border-[#00FFC2] shadow-[0_0_50px_rgba(0,0,0,0.8)] z-[300] flex flex-col items-center gap-4">
                <div className="w-12 h-12 bg-[#00FFC2]/10 rounded-full flex items-center justify-center">
                    <CheckCircle2 className="w-6 h-6 text-[#00FFC2]" />
                </div>
                <div className="text-center">
-                    <p className="font-bold text-lg mb-1">内容已复制</p>
-                    <p className="text-sm text-gray-400">请打开微信，粘贴并发送给好友</p>
+                    <p className="font-bold text-lg mb-1">{consoleData.text}</p>
+                    <p className="text-sm text-gray-400">{consoleData.subText}</p>
                </div>
            </div>
      )}

--- a/src/index.css
+++ b/src/index.css
@@ -7,7 +7,9 @@
  padding: 0;
  box-sizing: border-box;
 }
-
+html{
+  scroll-behavior: smooth;
+}
 body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

--- a/vite.config.js
+++ b/vite.config.js
@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
+  server: {
+    host: '0.0.0.0',  // 允许所有 IP 访问
+    port: 5173,        // 指定端口
+    open: false,       // 是否自动打开浏览器
+    // 如果需要 HTTPS
+    // https: true
+  }
 })