199 lines
4.8 KiB
HTML
199 lines
4.8 KiB
HTML
<!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>
|