整理文档并接入 H5 体验测试链路

2026-03-27 15:36:27 +08:00
parent 0e025c3426
commit 0e0a724025
55 changed files with 4177 additions and 55 deletions
--- a/event/content-h5-test-template.html
+++ b/event/content-h5-test-template.html
@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <title>CMR 内容体验测试页</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --bg: #f4f8f5;
+        --fg: #173127;
+        --muted: #5e6f65;
+        --accent: #1f7a5a;
+        --accent-soft: #dcefe6;
+        --card: rgba(255, 255, 255, 0.9);
+        --border: rgba(23, 49, 39, 0.08);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+        background:
+          radial-gradient(circle at top left, rgba(31, 122, 90, 0.14), transparent 32%),
+          linear-gradient(180deg, #eef6f1 0%, var(--bg) 100%);
+        color: var(--fg);
+      }
+
+      .page {
+        min-height: 100vh;
+        padding: 28px 18px 32px;
+      }
+
+      .card {
+        max-width: 720px;
+        margin: 0 auto;
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 24px;
+        padding: 24px;
+        box-shadow: 0 18px 42px rgba(24, 49, 39, 0.12);
+        backdrop-filter: blur(10px);
+      }
+
+      .eyebrow {
+        margin: 0 0 8px;
+        color: var(--muted);
+        font-size: 12px;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+
+      h1 {
+        margin: 0 0 12px;
+        font-size: 28px;
+        line-height: 1.2;
+      }
+
+      .lead {
+        margin: 0 0 18px;
+        color: var(--muted);
+        font-size: 15px;
+        line-height: 1.7;
+      }
+
+      .context {
+        margin: 18px 0 0;
+        padding: 14px 16px;
+        border-radius: 16px;
+        background: var(--accent-soft);
+      }
+
+      .context pre {
+        margin: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+        font-size: 12px;
+        line-height: 1.6;
+      }
+
+      .actions {
+        display: grid;
+        gap: 12px;
+        margin-top: 22px;
+      }
+
+      button {
+        appearance: none;
+        border: 0;
+        border-radius: 16px;
+        padding: 14px 18px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .btn-primary {
+        background: var(--accent);
+        color: #fff;
+      }
+
+      .btn-secondary {
+        background: rgba(23, 49, 39, 0.08);
+        color: var(--fg);
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <section class="card">
+        <p class="eyebrow">content-v1 test</p>
+        <h1 id="title">内容体验测试页</h1>
+        <p class="lead" id="desc">
+          这个页面用于验证小程序内容 H5 容器、上下文传参和关闭/回退链路。
+        </p>
+
+        <div class="actions">
+          <button class="btn-primary" id="closeBtn">关闭并返回小程序</button>
+          <button class="btn-secondary" id="fallbackBtn">模拟失败并回退原生卡片</button>
+        </div>
+
+        <div class="context">
+          <pre id="contextView">loading...</pre>
+        </div>
+      </section>
+    </main>
+
+    <script>
+      function getQueryParam(key) {
+        const params = new URLSearchParams(window.location.search);
+        return params.get(key) || "";
+      }
+
+      function parseContext() {
+        const raw = getQueryParam("cmrContext");
+        if (!raw) {
+          return {};
+        }
+        try {
+          return JSON.parse(raw);
+        } catch (error) {
+          return { parseError: String(error), raw };
+        }
+      }
+
+      function postToMiniProgram(action, payload) {
+        const message = { action, payload: payload || {} };
+        if (
+          window.wx &&
+          window.wx.miniProgram &&
+          typeof window.wx.miniProgram.postMessage === "function"
+        ) {
+          window.wx.miniProgram.postMessage({ data: message });
+        } else if (
+          window.parent &&
+          typeof window.parent.postMessage === "function"
+        ) {
+          window.parent.postMessage(message, "*");
+        }
+      }
+
+      const context = parseContext();
+      const titleEl = document.getElementById("title");
+      const descEl = document.getElementById("desc");
+      const contextViewEl = document.getElementById("contextView");
+
+      if (context.title) {
+        titleEl.textContent = context.title;
+      }
+      if (context.body) {
+        descEl.textContent = context.body;
+      }
+      contextViewEl.textContent = JSON.stringify(
+        {
+          bridge: getQueryParam("cmrBridge"),
+          kind: getQueryParam("cmrKind"),
+          context,
+        },
+        null,
+        2
+      );
+
+      document.getElementById("closeBtn").addEventListener("click", function () {
+        postToMiniProgram("close");
+      });
+
+      document.getElementById("fallbackBtn").addEventListener("click", function () {
+        postToMiniProgram("fallback");
+      });
+    </script>
+  </body>
+</html>