FEAT => 本次更新项目为：

App与H5交互构建完成

ckApp/pages.json

@@ -6,6 +6,13 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/index/test",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

ckApp/pages/index/index.vue

@@ -1,9 +1,5 @@
 <template>
 	<view class="content">
-		<view class="header">
-			iframe 通信示例
-		</view>
-		
 		<!-- iframe 容器 -->
 		<view class="iframe-container">
 			<web-view 
@@ -13,7 +9,7 @@
 				:fullscreen="false"
 				:webview-styles="{
 					width:'100%',
-					height:'260px'
+					height:'406px'
 				}"
 			></web-view>
 		</view>
@@ -26,7 +22,8 @@
 				<button @click="sendMessageToIframe" class="btn-send">发送消息到iframe</button>
 			</view>
 		</view>
-		
+
+
 		<!-- 消息显示区域 -->
 		<view class="message-area">
 			<text class="message-title">接收到的消息：</text>
@@ -36,10 +33,12 @@
 				</view>
 			</view>
 		</view>
+		
 	</view>
 </template>
 
 <script>
+	import { getTopSafeAreaHeightAsync } from '@utils/common';
 	export default {
 		data() {
 			return {
@@ -47,19 +46,17 @@
 				iframeUrl: '', // 动态构建的 URL
 				receivedMessages: [],
 				messageId: 0,
-				// URL 参数配置
 				urlParams: {}
 			}
 		},
 		onLoad() {
-			console.log('页面加载完成');
 			this.buildIframeUrl();
 		},
 		methods: {
 			// 构建 iframe URL，包含参数
 			buildIframeUrl() {
-				const params = [];
 				
+				const params = [];
 				Object.keys(this.urlParams).forEach(key => {
 					const value = this.urlParams[key];
 					if (value !== null && value !== undefined) {
@@ -71,49 +68,34 @@
 				
 				const queryString = params.join('&');
 				this.iframeUrl = queryString ? `${this.baseUrl}?${queryString}` : this.baseUrl;
-				// console.log('构建的 iframe URL:', this.iframeUrl);
 			},
-			
 			// 发送消息到 iframe（通过URL传参）
-			sendMessageToIframe() {
+			async sendMessageToIframe() {
+				const paddingTop = await getTopSafeAreaHeightAsync();
 				this.messageId++;
 				const message = {
 					type: 0, // 数据类型：0数据交互 1App功能调用
 					data: {
 						id: this.messageId,
 						content: `Hello，我是 App 发送的消息 ${this.messageId}`,
-						timestamp: Date.now()
+						timestamp: Date.now(),
+						paddingTop: paddingTop
 					}
 				};
 				
 				// 将消息添加到URL参数中
 				this.urlParams.message = encodeURIComponent(JSON.stringify(message));
 				this.buildIframeUrl();
-				
+				console.log('[App]SendMessage=>\n' + JSON.stringify(message));
-				console.log('App 发送消息：', message);
 			},
-			
 			// 接收 web-view 发送的消息
 			handleMessage(event) {
-				const webData = event.detail.data[0];
+				const [ResDetail] = event.detail.data;
-				console.log('App 收到消息：', webData);	
+				this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(ResDetail)}`);
-				
+				if (ResDetail.type === 0) {
-				this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(webData)}`);
+					console.log('收到数据交互消息:', JSON.stringify(ResDetail.data));
-				
+				} else if (ResDetail.type === 1) {
-				if (webData.type === 0) {
+					console.log('收到App功能调用:', JSON.stringify(ResDetail.data));
-					// 数据交互
-					console.log('收到数据交互消息:', webData.data);
-					uni.showToast({
-						title: `收到数据：${webData.data.content || '无内容'}`,
-						icon: 'none'
-					});
-				} else if (webData.type === 1) {
-					// App功能调用
-					console.log('收到App功能调用:', webData.data);
-					uni.showToast({
-						title: `收到功能调用：${webData.data.action || '未知功能'}`,
-						icon: 'none'
-					});
 				}
 			}
 		}
@@ -128,17 +110,6 @@
 		background-color: #f8f9fa;
 	}
 
-	.header {
-		height: 60rpx;
-		background: #fff;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 28rpx;
-		font-weight: 600;
-		color: #333;
-		border-bottom: 2rpx solid #f0f0f0;
-	}
 
 	.iframe-container {
 		overflow: hidden;
@@ -147,9 +118,7 @@
 		margin: 20rpx;
 		border-radius: 20rpx;
 		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
-		height: 500rpx;
+		height: 800rpx;
-		min-height: 500rpx;
-		
 		:deep(web-view) {
 			width: 100% !important;
 			height: 100% !important;

ckApp/pages/index/test.vue

@@ -0,0 +1,291 @@
+<template>
+	<view class="content">
+		<!-- iframe 容器 -->
+		<view class="iframe-container">
+			<web-view 
+				ref="webviewRef"
+				:src="iframeUrl" 
+				@message="handleMessage"
+				:fullscreen="false"
+				:webview-styles="{
+					width:'100%',
+					height:'406px'
+				}"
+			></web-view>
+		</view>
+	
+
+		<!-- 消息控制区域 -->
+		<view class="message-controls">
+			<text class="control-title">消息控制：</text>
+			<view class="control-buttons">
+				<button @click="sendMessageToIframe" class="btn-send">发送消息到iframe</button>
+			</view>
+		</view>
+
+
+		<!-- 消息显示区域 -->
+		<view class="message-area">
+			<text class="message-title">接收到的消息：</text>
+			<view class="message-list">
+				<view v-for="(msg, index) in receivedMessages" :key="index" class="message-item">
+					<text class="message-text">{{msg}}</text>
+				</view>
+			</view>
+		</view>
+
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				baseUrl: 'https://kr-op.quwanzhi.com/iframe', 
+				iframeUrl: '', // 动态构建的 URL
+				receivedMessages: [],
+				messageId: 0,
+				// URL 参数配置
+				urlParams: {}
+			}
+		},
+		onLoad() {
+			this.buildIframeUrl();
+		},
+		methods: {
+			// 构建 iframe URL，包含参数
+			buildIframeUrl() {
+				const params = [];
+				
+				Object.keys(this.urlParams).forEach(key => {
+					const value = this.urlParams[key];
+					if (value !== null && value !== undefined) {
+						const encodedKey = encodeURIComponent(key);
+						const encodedValue = encodeURIComponent(String(value));
+						params.push(`${encodedKey}=${encodedValue}`);
+					}
+				});
+				
+				const queryString = params.join('&');
+				this.iframeUrl = queryString ? `${this.baseUrl}?${queryString}` : this.baseUrl;
+				// console.log('构建的 iframe URL:', this.iframeUrl);
+			},
+			
+			// 发送消息到 iframe（通过URL传参）
+			sendMessageToIframe() {
+				this.messageId++;
+				const message = {
+					type: 0, // 数据类型：0数据交互 1App功能调用
+					data: {
+						id: this.messageId,
+						content: `Hello，我是 App 发送的消息 ${this.messageId}`,
+						timestamp: Date.now()
+					}
+				};
+				
+				// 将消息添加到URL参数中
+				this.urlParams.message = encodeURIComponent(JSON.stringify(message));
+				this.buildIframeUrl();
+				
+				console.log('App 发送消息：', message);
+			},
+			
+			// 接收 web-view 发送的消息
+			handleMessage(event) {
+				const webData = event.detail.data[0];
+				console.log('App 收到消息：', webData);	
+				
+				this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(webData)}`);
+				
+				if (webData.type === 0) {
+					// 数据交互
+					console.log('收到数据交互消息:', webData.data);
+					uni.showToast({
+						title: `收到数据：${webData.data.content || '无内容'}`,
+						icon: 'none'
+					});
+				} else if (webData.type === 1) {
+					// App功能调用
+					console.log('收到App功能调用:', webData.data);
+					uni.showToast({
+						title: `收到功能调用：${webData.data.action || '未知功能'}`,
+						icon: 'none'
+					});
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #f8f9fa;
+	}
+
+
+	.iframe-container {
+		overflow: hidden;
+		background: white;
+		position: relative;
+		margin: 20rpx;
+		border-radius: 20rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+		height: 800rpx;
+		:deep(web-view) {
+			width: 100% !important;
+			height: 100% !important;
+			border: none !important;
+			outline: none !important;
+			box-shadow: none !important;
+		}
+		
+		:deep(iframe) {
+			border: none !important;
+			outline: none !important;
+			box-shadow: none !important;
+		}
+	}
+
+	.message-controls {
+		padding: 20rpx;
+		background: #f0f0f0;
+		border-bottom: 2rpx solid #e0e0e0;
+		display: flex;
+		flex-direction: column;
+		gap: 16rpx;
+	}
+
+	.control-title {
+		font-size: 28rpx;
+		color: #333;
+		font-weight: 600;
+		margin-bottom: 16rpx;
+		padding-bottom: 16rpx;
+		border-bottom: 2rpx solid #d0d0d0;
+	}
+
+	.control-buttons {
+		display: flex;
+		gap: 16rpx;
+	}
+
+	.btn-send {
+		flex: 1;
+		background: linear-gradient(135deg, #188eee 0%, #096dd9 100%);
+		color: white;
+		border: none;
+		border-radius: 20rpx;
+		padding: 20rpx 16rpx;
+		font-size: 26rpx;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		box-shadow: 0 4rpx 12rpx rgba(24, 142, 238, 0.3);
+
+		&:active {
+			transform: translateY(2rpx);
+			box-shadow: 0 2rpx 8rpx rgba(24, 142, 238, 0.4);
+		}
+
+		&:hover {
+			background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%);
+		}
+	}
+
+	.message-area {
+		flex: 1;
+		padding: 20rpx;
+		background: white;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.message-title {
+		font-size: 28rpx;
+		color: #333;
+		margin-bottom: 20rpx;
+		display: block;
+		font-weight: 600;
+		border-bottom: 2rpx solid #f0f0f0;
+		padding-bottom: 16rpx;
+	}
+
+	.message-list {
+		flex: 1;
+		overflow-y: auto;
+		border: 2rpx solid #f0f0f0;
+		border-radius: 16rpx;
+		padding: 16rpx;
+		background: #fafafa;
+
+		&::-webkit-scrollbar {
+			width: 8rpx;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: #f1f1f1;
+			border-radius: 4rpx;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #c1c1c1;
+			border-radius: 4rpx;
+
+			&:hover {
+				background: #a8a8a8;
+			}
+		}
+	}
+
+	.message-item {
+		background: white;
+		padding: 20rpx;
+		margin-bottom: 16rpx;
+		border-radius: 12rpx;
+		border-left: 6rpx solid #188eee;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+		transition: all 0.3s ease;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&:hover {
+			transform: translateX(4rpx);
+			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+		}
+	}
+
+	.message-text {
+		font-size: 24rpx;
+		color: #333;
+		word-break: break-all;
+		line-height: 1.5;
+		font-family: "Courier New", monospace;
+	}
+
+	@media (max-width: 768rpx) {
+		.content {
+			padding: 0;
+		}
+
+		.iframe-container {
+			margin: 16rpx;
+			border-radius: 16rpx;
+		}
+
+		.message-area {
+			padding: 16rpx;
+		}
+
+		.message-item {
+			padding: 16rpx;
+			margin-bottom: 12rpx;
+		}
+	}
+</style>

ckApp/utils/common.js

@@ -0,0 +1,36 @@
+/**
+ * 异步获取设备顶部安全区域高度
+ * @returns {Promise<number>} 顶部安全区域高度
+ */
+export function getTopSafeAreaHeightAsync() {
+    return new Promise((resolve, reject) => {
+      uni.getSystemInfo({
+        success: (res) => {
+          try {
+            const safeAreaInsets = res.safeAreaInsets;
+            
+            if (safeAreaInsets && safeAreaInsets.top !== undefined) {
+              resolve(safeAreaInsets.top);
+              return;
+            }
+            
+            if (res.safeArea) {
+              const safeArea = res.safeArea;
+              const statusBarHeight = res.statusBarHeight || 0;
+              const topSafeHeight = safeArea.top - statusBarHeight;
+              resolve(Math.max(0, topSafeHeight));
+              return;
+            }
+            
+            resolve(res.statusBarHeight || 0);
+            
+          } catch (error) {
+            reject(error);
+          }
+        },
+        fail: (error) => {
+          reject(error);
+        }
+      });
+    });
+  }

ckApp/vite.config.js

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import uni from '@dcloudio/vite-plugin-uni'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [uni()],
+  resolve: {
+    alias: {
+      // 根目录别名
+      '@': resolve(__dirname, '/'),
+      '@root': resolve(__dirname, '/'),
+      
+      // 页面和组件别名
+      '@pages': resolve(__dirname, 'pages'),
+      '@components': resolve(__dirname, 'components'),
+      
+      // 工具和配置别名
+      '@utils': resolve(__dirname, 'utils'),
+    }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/uni.scss";`
+      }
+    }
+  }
+}) 

nkebao/src/pages/iframe/index.module.scss

@@ -62,21 +62,6 @@
   }
 }
 
-.message-input {
-  flex: 1;
-  padding: 12px 15px;
-  border: 2px solid #e1e5e9;
-  border-radius: 8px;
-  font-size: 1rem;
-  transition: border-color 0.3s ease;
-
-  &:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px var(--primary-shadow-light);
-  }
-}
-
 .button-group {
   display: flex;
   gap: 10px;
@@ -150,6 +135,7 @@
   border-radius: 8px;
   padding: 10px;
   background: #f8f9fa;
+  font-size: 12px;
 }
 
 .no-messages {
@@ -166,7 +152,7 @@
   border-radius: 6px;
   border-left: 4px solid var(--primary-color);
   box-shadow: 0 2px 4px var(--primary-shadow-light);
-
+  font-size: 12px;
   &:last-child {
     margin-bottom: 0;
   }
@@ -174,7 +160,7 @@
 
 .message-text {
   font-family: "Courier New", monospace;
-  font-size: 0.9rem;
+  font-size: 12px;
   color: #333;
   word-break: break-all;
   line-height: 1.4;

nkebao/src/pages/iframe/index.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react";
 import style from "./index.module.scss";
-
+import Layout from "@/components/Layout/Layout";
+import NavCommon from "@/components/NavCommon";
+import { Input } from "antd";
 // 声明全局的 uni 对象
 declare global {
   interface Window {
@@ -18,80 +20,43 @@ const IframeDebugPage: React.FC = () => {
   const [messageId, setMessageId] = useState(0);
   const [inputMessage, setInputMessage] = useState("");
 
+  // 解析 URL 参数中的消息
+  const parseUrlMessage = () => {
+    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(decodeURIComponent(messageParam));
+        console.log("[存客宝]ReceiveMessage=>\n" + JSON.stringify(message));
+        handleReceivedMessage(message);
+        // 清除URL中的message参数
+        const newUrl =
+          window.location.pathname +
+          window.location.search
+            .replace(/[?&]message=[^&]*/, "")
+            .replace(/^&/, "?");
+        window.history.replaceState({}, "", newUrl);
+      } catch (e) {
+        console.error("解析URL消息失败:", e);
+      }
+    }
+  };
+
   useEffect(() => {
-    // 解析 URL 参数中的消息
-    const parseUrlMessage = () => {
-      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(decodeURIComponent(messageParam));
-          console.log("存客宝 收到消息:", message);
-          handleReceivedMessage(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 初始化完成");
-      // 发送准备就绪消息
-      setTimeout(() => {
-        sendMessageToParent({
-          type: 0, // 数据交互
-          data: {
-            action: "ready",
-            status: "loaded",
-            url: window.location.href,
-          },
-        });
-      }, 500);
-    };
-
-    // 监听 SDK 初始化完成事件
-    document.addEventListener("UniAppJSBridgeReady", initUniSDK);
-
-    // 解析 URL 参数中的消息
     parseUrlMessage();
-
+    // 监听 SDK 初始化完成事件
-    // 监听 postMessage 事件
-    const handlePostMessage = (event: MessageEvent) => {
-      if (event.data && typeof event.data === "object") {
-        if (event.data.data) {
-          handleReceivedMessage(event.data.data);
-        } else {
-          handleReceivedMessage(event.data);
-        }
-      }
-    };
-
-    window.addEventListener("message", handlePostMessage);
-
-    return () => {
-      document.removeEventListener("UniAppJSBridgeReady", initUniSDK);
-      window.removeEventListener("message", handlePostMessage);
-    };
   }, []);
 
   // 处理接收到的消息
@@ -107,12 +72,17 @@ const IframeDebugPage: React.FC = () => {
         window.uni.postMessage({
           data: message,
         });
-        console.log("发送消息到 App:", message);
+        console.log("[存客宝]SendMessage=>\n" + JSON.stringify(message));
       } catch (e) {
-        console.error("发送失败:", e);
+        console.error(
+          "[存客宝]SendMessage=>\n" + JSON.stringify(message) + "发送失败:",
+          e,
+        );
       }
     } else {
-      console.error("无法发送消息");
+      console.error(
+        "[存客宝]SendMessage=>\n" + JSON.stringify(message) + "无法发送消息",
+      );
     }
   };
 
@@ -128,7 +98,7 @@ const IframeDebugPage: React.FC = () => {
       data: {
         id: newMessageId,
         content: inputMessage,
-        source: "web-view",
+        source: "存客宝消息源",
         timestamp: Date.now(),
       },
     };
@@ -147,7 +117,7 @@ const IframeDebugPage: React.FC = () => {
       data: {
         id: newMessageId,
         action: "ping",
-        content: `web-view测试消息 ${newMessageId}`,
+        content: `存客宝测试消息 ${newMessageId}`,
         random: Math.random(),
       },
     };
@@ -178,80 +148,66 @@ const IframeDebugPage: React.FC = () => {
   };
 
   return (
-    <div className={style["iframe-debug-page"]}>
+    <Layout header={<NavCommon title="iframe调试" />}>
-      <div className={style.header}>
+      <div className={style["iframe-debug-page"]}>
-        <h1>iframe 通信调试页面</h1>
+        <div className={style.content}>
-        <p>当前时间: {new Date().toLocaleString()}</p>
+          <div className={style["message-panel"]}>
-      </div>
+            <h4>接收到的消息</h4>
-
+            <div className={style["message-list"]}>
-      <div className={style.content}>
+              {receivedMessages.length === 0 ? (
-        <div className={style["control-panel"]}>
+                <div className={style["no-messages"]}>暂无消息</div>
-          <h3>控制面板</h3>
+              ) : (
-
+                receivedMessages.map((msg, index) => (
-          <div className={style["input-group"]}>
+                  <div key={index} className={style["message-item"]}>
-            <input
+                    <span className={style["message-text"]}>{msg}</span>
-              type="text"
+                  </div>
-              value={inputMessage}
+                ))
-              onChange={e => setInputMessage(e.target.value)}
+              )}
-              placeholder="输入要发送的消息"
+            </div>
-              className={style["message-input"]}
-            />
-            <button
-              onClick={sendCustomMessage}
-              className={`${style.btn} ${style["btn-primary"]}`}
-            >
-              发送消息
-            </button>
           </div>
 
-          <div className={style["button-group"]}>
+          <div className={style["control-panel"]}>
-            <button
+            <h4>控制面板</h4>
-              onClick={sendTestMessage}
-              className={`${style.btn} ${style["btn-secondary"]}`}
-            >
-              发送测试消息
-            </button>
-            <button
-              onClick={sendAppFunctionCall}
-              className={`${style.btn} ${style["btn-warning"]}`}
-            >
-              功能调用
-            </button>
-            <button
-              onClick={clearMessages}
-              className={`${style.btn} ${style["btn-danger"]}`}
-            >
-              清空消息
-            </button>
-          </div>
-        </div>
 
-        <div className={style["message-panel"]}>
+            <div className={style["input-group"]}>
-          <h3>接收到的消息 ({receivedMessages.length})</h3>
+              <Input
-          <div className={style["message-list"]}>
+                type="text"
-            {receivedMessages.length === 0 ? (
+                value={inputMessage}
-              <div className={style["no-messages"]}>暂无消息</div>
+                onChange={e => setInputMessage(e.target.value)}
-            ) : (
+                placeholder="输入要发送的消息"
-              receivedMessages.map((msg, index) => (
+              />
-                <div key={index} className={style["message-item"]}>
+              <button
-                  <span className={style["message-text"]}>{msg}</span>
+                onClick={sendCustomMessage}
-                </div>
+                className={`${style.btn} ${style["btn-primary"]}`}
-              ))
+              >
-            )}
+                发送消息
+              </button>
+            </div>
+
+            <div className={style["button-group"]}>
+              <button
+                onClick={sendTestMessage}
+                className={`${style.btn} ${style["btn-secondary"]}`}
+              >
+                发送测试消息
+              </button>
+              <button
+                onClick={sendAppFunctionCall}
+                className={`${style.btn} ${style["btn-warning"]}`}
+              >
+                功能调用
+              </button>
+              <button
+                onClick={clearMessages}
+                className={`${style.btn} ${style["btn-danger"]}`}
+              >
+                清空消息
+              </button>
+            </div>
           </div>
         </div>
       </div>
-
+    </Layout>
-      <div className={style["info-panel"]}>
-        <h3>页面信息</h3>
-        <div className={style["info-item"]}>
-          <strong>页面URL:</strong> {window.location.href}
-        </div>
-        <div className={style["info-item"]}>
-          <strong>消息ID:</strong> {messageId}
-        </div>
-      </div>
-    </div>
   );
 };