From 91ddc426673ec83ae896e24cfe197fbb9c3a4cfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Sat, 2 Aug 2025 15:01:54 +0800 Subject: [PATCH] =?UTF-8?q?FEAT=20=3D>=20=E6=9C=AC=E6=AC=A1=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE=E4=B8=BA=EF=BC=9A=20=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E5=AE=8C=E6=88=90=EF=BC=8C=E5=BC=80=E5=A7=8B=E5=B0=81?= =?UTF-8?q?=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ckApp/pages/index/index.vue | 33 +++++++++++---------- nkebao/src/pages/iframe/index.tsx | 48 ++++++++++++++++++++----------- 2 files changed, 48 insertions(+), 33 deletions(-) diff --git a/ckApp/pages/index/index.vue b/ckApp/pages/index/index.vue index e9f07a3c..9941a044 100644 --- a/ckApp/pages/index/index.vue +++ b/ckApp/pages/index/index.vue @@ -48,13 +48,7 @@ receivedMessages: [], messageId: 0, // URL 参数配置 - urlParams: { - userId: '12345', - token: 'abc123', - theme: 'dark', - language: 'zh-CN', - timestamp: Date.now() - } + urlParams: {} } }, onLoad() { @@ -84,10 +78,12 @@ sendMessageToIframe() { this.messageId++; const message = { - id: this.messageId, - type: 'fromApp', - content: `Hello,我是 App 发送的消息 ${this.messageId}`, - timestamp: Date.now() + type: 0, // 数据类型:0数据交互 1App功能调用 + data: { + id: this.messageId, + content: `Hello,我是 App 发送的消息 ${this.messageId}`, + timestamp: Date.now() + } }; // 将消息添加到URL参数中 @@ -104,15 +100,18 @@ this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(webData)}`); - if (webData.type === 'ready') { - // console.log('web-view 已准备就绪'); + if (webData.type === 0) { + // 数据交互 + console.log('收到数据交互消息:', webData.data); uni.showToast({ - title: 'web-view 连接成功', - icon: 'success' + title: `收到数据:${webData.data.content || '无内容'}`, + icon: 'none' }); - } else if (webData.type === 'toApp') { + } else if (webData.type === 1) { + // App功能调用 + console.log('收到App功能调用:', webData.data); uni.showToast({ - title: `收到:${webData.content}`, + title: `收到功能调用:${webData.data.action || '未知功能'}`, icon: 'none' }); } diff --git a/nkebao/src/pages/iframe/index.tsx b/nkebao/src/pages/iframe/index.tsx index 521db96a..459b7f10 100644 --- a/nkebao/src/pages/iframe/index.tsx +++ b/nkebao/src/pages/iframe/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from "react"; import style from "./index.module.scss"; -import { json } from "stream/consumers"; // 声明全局的 uni 对象 declare global { @@ -10,10 +9,8 @@ declare global { } interface Message { - id: number; - type: string; + type: number; // 数据类型:0数据交互 1App功能调用 data: any; - timestamp: number; } const IframeDebugPage: React.FC = () => { @@ -40,9 +37,9 @@ const IframeDebugPage: React.FC = () => { if (messageParam) { try { - const message = decodeURIComponent(messageParam); + const message = JSON.parse(decodeURIComponent(messageParam)); console.log("存客宝 收到消息:", message); - handleReceivedMessage(JSON.parse(message)); + handleReceivedMessage(message); // 清除URL中的message参数 const newUrl = window.location.pathname + @@ -62,13 +59,12 @@ const IframeDebugPage: React.FC = () => { // 发送准备就绪消息 setTimeout(() => { sendMessageToParent({ - id: 0, - type: "ready", + type: 0, // 数据交互 data: { + action: "ready", status: "loaded", url: window.location.href, }, - timestamp: Date.now(), }); }, 500); }; @@ -100,7 +96,7 @@ const IframeDebugPage: React.FC = () => { // 处理接收到的消息 const handleReceivedMessage = (message: Message) => { - const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${message}`; + const messageText = `[${new Date().toLocaleTimeString()}] 收到: ${JSON.stringify(message)}`; setReceivedMessages(prev => [...prev, messageText]); }; @@ -128,14 +124,13 @@ const IframeDebugPage: React.FC = () => { setMessageId(newMessageId); const message: Message = { - id: newMessageId, - type: "toApp", + type: 0, // 数据交互 data: { + id: newMessageId, content: inputMessage, source: "web-view", timestamp: Date.now(), }, - timestamp: Date.now(), }; sendMessageToParent(message); @@ -148,14 +143,29 @@ const IframeDebugPage: React.FC = () => { setMessageId(newMessageId); const message: Message = { - id: newMessageId, - type: "toApp", + type: 0, // 数据交互 data: { + id: newMessageId, action: "ping", content: `web-view测试消息 ${newMessageId}`, random: Math.random(), }, - timestamp: Date.now(), + }; + + sendMessageToParent(message); + }; + + // 发送App功能调用消息 + const sendAppFunctionCall = () => { + const message: Message = { + type: 1, // App功能调用 + data: { + action: "showToast", + params: { + title: "来自H5的功能调用", + icon: "success", + }, + }, }; sendMessageToParent(message); @@ -201,6 +211,12 @@ const IframeDebugPage: React.FC = () => { > 发送测试消息 +