FEAT => 本次更新项目为:

交互完成,开始封装
This commit is contained in:
超级老白兔
2025-08-02 15:01:54 +08:00
parent fca202fd76
commit 91ddc42667
2 changed files with 48 additions and 33 deletions

View File

@@ -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'
});
}

View File

@@ -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 = () => {
>
</button>
<button
onClick={sendAppFunctionCall}
className={`${style.btn} ${style["btn-warning"]}`}
>
</button>
<button
onClick={clearMessages}
className={`${style.btn} ${style["btn-danger"]}`}