diff --git a/ckApp/App.vue b/ckApp/App.vue index 8c2b7321..f3393a5b 100644 --- a/ckApp/App.vue +++ b/ckApp/App.vue @@ -1,15 +1,5 @@ - +
diff --git a/nkebao/src/pages/iframe/index.tsx b/nkebao/src/pages/iframe/index.tsx index 8b576add..521db96a 100644 --- a/nkebao/src/pages/iframe/index.tsx +++ b/nkebao/src/pages/iframe/index.tsx @@ -1,5 +1,6 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect } from "react"; import style from "./index.module.scss"; +import { json } from "stream/consumers"; // 声明全局的 uni 对象 declare global { @@ -19,41 +20,46 @@ const IframeDebugPage: React.FC = () => { const [receivedMessages, setReceivedMessages] = useState([]); const [messageId, setMessageId] = useState(0); const [inputMessage, setInputMessage] = useState(""); - const [urlParams, setUrlParams] = useState>({}); - const [processedMessages] = useState(new Set()); // 用于防止重复处理消息 useEffect(() => { - // 解析 URL 参数 - const parseUrlParams = () => { - // 使用兼容的方式解析 URL 参数 - const search = window.location.search.substring(1); // 移除开头的 '?' - const params: Record = {}; + // 解析 URL 参数中的消息 + const parseUrlMessage = () => { + const search = window.location.search.substring(1); + let messageParam = null; if (search) { const pairs = search.split("&"); - pairs.forEach(pair => { + for (const pair of pairs) { const [key, value] = pair.split("="); - if (key) { - params[decodeURIComponent(key)] = decodeURIComponent(value || ""); + if (key === "message" && value) { + messageParam = decodeURIComponent(value); + break; } - }); + } } - setUrlParams(params); - console.log("解析到的 URL 参数:", JSON.stringify(params)); - - // 将 URL 参数作为消息添加到列表 - if (Object.keys(params).length > 0) { - const paramMessage = `[${new Date().toLocaleTimeString()}] URL参数: ${JSON.stringify(params)}`; - setReceivedMessages(prev => [paramMessage, ...prev]); + if (messageParam) { + try { + const message = decodeURIComponent(messageParam); + console.log("存客宝 收到消息:", message); + handleReceivedMessage(JSON.parse(message)); + // 清除URL中的message参数 + const newUrl = + window.location.pathname + + window.location.search + .replace(/[?&]message=[^&]*/, "") + .replace(/^&/, "?"); + window.history.replaceState({}, "", newUrl); + } catch (e) { + console.error("解析URL消息失败:", e); + } } }; // 初始化 uni-app web-view SDK const initUniSDK = () => { - console.log("web-view SDK 初始化完成"); - - // 页面加载完成后发送准备就绪消息，包含 URL 参数 + // console.log("web-view SDK 初始化完成"); + // 发送准备就绪消息 setTimeout(() => { sendMessageToParent({ id: 0, @@ -61,7 +67,6 @@ const IframeDebugPage: React.FC = () => { data: { status: "loaded", url: window.location.href, - urlParams: urlParams, }, timestamp: Date.now(), }); @@ -71,24 +76,16 @@ const IframeDebugPage: React.FC = () => { // 监听 SDK 初始化完成事件 document.addEventListener("UniAppJSBridgeReady", initUniSDK); - // 解析 URL 参数 - parseUrlParams(); + // 解析 URL 参数中的消息 + parseUrlMessage(); - // 检查URL参数中的消息 - checkUrlMessage(); - - // 监听 postMessage 事件（备用方案） + // 监听 postMessage 事件 const handlePostMessage = (event: MessageEvent) => { - console.log("收到 postMessage:", event.data); - - // 处理 uni.postMessage 发送的消息格式 if (event.data && typeof event.data === "object") { - // uni.postMessage 发送的消息格式是 { data: message } if (event.data.data) { - handleParentMessage(event.data.data); + handleReceivedMessage(event.data.data); } else { - // 直接发送的消息格式 - handleParentMessage(event.data); + handleReceivedMessage(event.data); } } }; @@ -99,104 +96,31 @@ const IframeDebugPage: React.FC = () => { document.removeEventListener("UniAppJSBridgeReady", initUniSDK); window.removeEventListener("message", handlePostMessage); }; - }, []); // 移除 urlParams 依赖，避免无限循环 - - // 检查URL参数中的消息 - const checkUrlMessage = () => { - // 使用兼容的方式解析 URL 参数 - const search = window.location.search.substring(1); - let messageParam = null; - - if (search) { - const pairs = search.split("&"); - for (const pair of pairs) { - const [key, value] = pair.split("="); - if (key === "message" && value) { - messageParam = decodeURIComponent(value); - break; - } - } - } - - if (messageParam) { - try { - const message = JSON.parse(messageParam); - handleParentMessage(message); - // 清除URL参数 - const newUrl = window.location.pathname; - window.history.replaceState({}, "", newUrl); - } catch (e) { - console.error("解析URL消息失败:", e); - } - } - }; - - // 移除 localStorage 相关代码，使用 postMessage 通信 - - // 接收 App 发送的消息（需与 App 端 evalJS 调用的函数名一致） - const receiveFromApp = (data: any) => { - console.log("web-view 收到 App 消息：", data); - handleParentMessage(data); - }; - - // 将函数挂载到全局，供 App 端调用 - useEffect(() => { - (window as any).receiveFromApp = receiveFromApp; - - return () => { - delete (window as any).receiveFromApp; - }; }, []); - // 接收 App 发送的消息 - const handleParentMessage = (message: Message) => { - // 生成消息的唯一标识，用于防重复处理 - const messageKey = `${message.id}-${message.timestamp}-${JSON.stringify(message.data)}`; - - // 检查是否已经处理过这个消息 - if (processedMessages.has(messageKey)) { - console.log("消息已处理过，跳过:", message); - return; - } - - // 添加到已处理集合 - processedMessages.add(messageKey); - - console.log("web-view 收到 App 消息：", message); - const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${JSON.stringify(message)}`; + // 处理接收到的消息 + const handleReceivedMessage = (message: Message) => { + const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${message}`; setReceivedMessages(prev => [...prev, messageText]); - - // 根据消息类型进行不同处理 - if (message.type === "command") { - if (message.data?.action === "update") { - // 更新页面内容 - console.log("执行更新操作:", message.data.content); - } - } else if (message.type === "fromApp") { - console.log("收到 App 消息:", message.data?.content); - } }; // 向 App 发送消息 const sendMessageToParent = (message: Message) => { - console.log("web-view 发送消息到 App:", message); - - // 通过 uni.postMessage 发送消息（数据必须放在 data 字段中） if (window.uni && window.uni.postMessage) { try { window.uni.postMessage({ data: message, }); - console.log("通过 uni.postMessage 发送消息到 App:", message); + console.log("发送消息到 App:", message); } catch (e) { - console.error("uni.postMessage 失败:", e); + console.error("发送失败:", e); } } else { - console.error("uni 对象不存在，无法发送消息"); + console.error("无法发送消息"); } }; - // 向 App 发送消息 + // 发送自定义消息到 App const sendCustomMessage = () => { if (!inputMessage.trim()) return; @@ -307,32 +231,9 @@ const IframeDebugPage: React.FC = () => {
页面URL: {window.location.href}
-
- User Agent: {navigator.userAgent} -
-
- 窗口大小: {window.innerWidth} x {window.innerHeight} -
消息ID: {messageId}
- - {/* URL 参数显示区域 */} -
-

URL 参数

- {Object.keys(urlParams).length === 0 ? ( -
暂无 URL 参数
- ) : ( -
- {Object.entries(urlParams).map(([key, value]) => ( -
- {key}: - {value} -
- ))} -
- )} -
);