zhangyan
/
mini-prog


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!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>