FEAT => 本次更新项目为:
交互完成,开始封装
This commit is contained in:
@@ -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'
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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"]}`}
|
||||
|
||||
Reference in New Issue
Block a user