diff --git a/ckApp/pages.json b/ckApp/pages.json index 21b4384c..e61b6eea 100644 --- a/ckApp/pages.json +++ b/ckApp/pages.json @@ -6,6 +6,13 @@ "navigationBarTitleText": "", "navigationStyle": "custom" } + }, + { + "path": "pages/index/test", + "style": { + "navigationBarTitleText": "", + "navigationStyle": "custom" + } } ], "globalStyle": { diff --git a/ckApp/pages/index/index.vue b/ckApp/pages/index/index.vue index 9941a044..231e092b 100644 --- a/ckApp/pages/index/index.vue +++ b/ckApp/pages/index/index.vue @@ -1,9 +1,5 @@ + + diff --git a/ckApp/utils/common.js b/ckApp/utils/common.js new file mode 100644 index 00000000..2bdcef31 --- /dev/null +++ b/ckApp/utils/common.js @@ -0,0 +1,36 @@ +/** + * 异步获取设备顶部安全区域高度 + * @returns {Promise} 顶部安全区域高度 + */ +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); + } + }); + }); + } \ No newline at end of file diff --git a/ckApp/vite.config.js b/ckApp/vite.config.js new file mode 100644 index 00000000..3910715c --- /dev/null +++ b/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";` + } + } + } +}) \ No newline at end of file diff --git a/nkebao/src/pages/iframe/index.module.scss b/nkebao/src/pages/iframe/index.module.scss index 3d092f63..748327a6 100644 --- a/nkebao/src/pages/iframe/index.module.scss +++ b/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; diff --git a/nkebao/src/pages/iframe/index.tsx b/nkebao/src/pages/iframe/index.tsx index 459b7f10..c97aaab4 100644 --- a/nkebao/src/pages/iframe/index.tsx +++ b/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(); - - // 监听 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); - }; + // 监听 SDK 初始化完成事件 }, []); // 处理接收到的消息 @@ -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 ( -
-
-

iframe 通信调试页面

-

当前时间: {new Date().toLocaleString()}

-
- -
-
-

控制面板

- -
- setInputMessage(e.target.value)} - placeholder="输入要发送的消息" - className={style["message-input"]} - /> - + }> +
+
+
+

接收到的消息

+
+ {receivedMessages.length === 0 ? ( +
暂无消息
+ ) : ( + receivedMessages.map((msg, index) => ( +
+ {msg} +
+ )) + )} +
-
- - - -
-
+
+

控制面板

-
-

接收到的消息 ({receivedMessages.length})

-
- {receivedMessages.length === 0 ? ( -
暂无消息
- ) : ( - receivedMessages.map((msg, index) => ( -
- {msg} -
- )) - )} +
+ setInputMessage(e.target.value)} + placeholder="输入要发送的消息" + /> + +
+ +
+ + + +
- -
-

页面信息

-
- 页面URL: {window.location.href} -
-
- 消息ID: {messageId} -
-
-
+ ); };