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 发送消息：', message);
+				console.log('[App]SendMessage=>\n' + JSON.stringify(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'
-					});
+				const [ResDetail] = event.detail.data;
+				this.receivedMessages.push(`[${new Date().toLocaleTimeString()}] ${JSON.stringify(ResDetail)}`);
+				if (ResDetail.type === 0) {
+					console.log('收到数据交互消息:', JSON.stringify(ResDetail.data));
+				} else if (ResDetail.type === 1) {
+					console.log('收到App功能调用:', JSON.stringify(ResDetail.data));
 				}
 			}
 		}
@@ -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;
-		min-height: 500rpx;
-		
+		height: 800rpx;
 		: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";`
+      }
+    }
+  }
+})