181 lines
4.9 KiB
HTML
181 lines
4.9 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>我的</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
|
||
background: #f4f6fb;
|
||
color: #1f2d3d;
|
||
}
|
||
.container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
padding: 32px 20px 40px;
|
||
}
|
||
h1 {
|
||
font-size: 26px;
|
||
margin: 0 0 16px;
|
||
}
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 16px 20px;
|
||
box-shadow: 0 10px 24px rgba(15, 33, 66, 0.08);
|
||
margin-bottom: 18px;
|
||
}
|
||
.label {
|
||
font-size: 12px;
|
||
color: #7a8699;
|
||
margin-bottom: 8px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.user-info {
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
word-break: break-all;
|
||
}
|
||
.actions {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
button {
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
border: none;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
}
|
||
.btn-primary {
|
||
background: #2d7cf6;
|
||
color: #fff;
|
||
}
|
||
.btn-danger {
|
||
background: #ff5c5c;
|
||
color: #fff;
|
||
}
|
||
.hint {
|
||
font-size: 12px;
|
||
color: #9aa4b2;
|
||
margin-top: 8px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>H5 我的</h1>
|
||
<div class="card">
|
||
<div class="label">收到的文本</div>
|
||
<div id="saved-text" class="user-info">未接收到文本</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="label">用户信息</div>
|
||
<div id="user" class="user-info">未获取用户信息</div>
|
||
</div>
|
||
<div class="actions">
|
||
<button class="btn-primary" id="btn-info">请求用户信息</button>
|
||
<button class="btn-danger" id="btn-logout">退出登录</button>
|
||
</div>
|
||
<div class="hint">该页面通过 postMessage 与 uni-app web-view 通信</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
var userEl = document.getElementById('user');
|
||
var savedTextEl = document.getElementById('saved-text');
|
||
var btnInfo = document.getElementById('btn-info');
|
||
var btnLogout = document.getElementById('btn-logout');
|
||
|
||
function normalizePayload(payload) {
|
||
if (payload && payload.data) {
|
||
if (Array.isArray(payload.data) && payload.data.length) {
|
||
return payload.data[0];
|
||
}
|
||
if (payload.data.type) {
|
||
return payload.data;
|
||
}
|
||
}
|
||
return payload;
|
||
}
|
||
|
||
function setUserInfo(data) {
|
||
if (!data) {
|
||
userEl.textContent = '未获取用户信息';
|
||
return;
|
||
}
|
||
userEl.textContent =
|
||
'昵称：' +
|
||
(data.nickName || '-') +
|
||
'，用户ID：' +
|
||
(data.userId || '-') +
|
||
'，Token：' +
|
||
(data.token || '-');
|
||
}
|
||
|
||
function setSavedText(text) {
|
||
savedTextEl.textContent = text ? text : '未接收到文本';
|
||
}
|
||
|
||
function getQueryParam(key) {
|
||
var params = new URLSearchParams(window.location.search);
|
||
return params.get(key) || '';
|
||
}
|
||
|
||
function postMessageToUniApp(payload) {
|
||
if (window.wx && window.wx.miniProgram && window.wx.miniProgram.postMessage) {
|
||
window.wx.miniProgram.postMessage({ data: payload });
|
||
return;
|
||
}
|
||
if (window.parent && window.parent.postMessage) {
|
||
window.parent.postMessage(payload, '*');
|
||
}
|
||
}
|
||
|
||
function handleMessage(payload) {
|
||
var data = normalizePayload(payload);
|
||
if (!data || !data.type) return;
|
||
|
||
if (data.type === 'userInfo') {
|
||
setUserInfo(data.data);
|
||
}
|
||
if (data.type === 'savedText') {
|
||
setSavedText(data.data && data.data.text ? data.data.text : '');
|
||
}
|
||
if (data.type === 'logoutSuccess') {
|
||
userEl.textContent = '已退出登录';
|
||
}
|
||
}
|
||
|
||
btnInfo.addEventListener('click', function () {
|
||
postMessageToUniApp({ type: 'getUserInfo' });
|
||
});
|
||
|
||
btnLogout.addEventListener('click', function () {
|
||
postMessageToUniApp({ type: 'triggerLogout' });
|
||
});
|
||
|
||
window.addEventListener('message', function (event) {
|
||
handleMessage(event.data);
|
||
});
|
||
|
||
if (window.wx && window.wx.miniProgram && window.wx.miniProgram.onMessage) {
|
||
window.wx.miniProgram.onMessage(function (message) {
|
||
handleMessage(message);
|
||
});
|
||
}
|
||
|
||
var initialText = getQueryParam('text');
|
||
if (initialText) {
|
||
setSavedText(initialText);
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|