wx-h5-demo: 调试日志加复制按钮(Clipboard API→execCommand→手动文本区三层兜底)

This commit is contained in:
2026-09-07 20:42:49 +08:00
parent 3ef9052310
commit e7337ab089

View File

@@ -80,6 +80,7 @@
<b>调试日志</b>
<span id="dbgCount"></span>
<span>
<button id="dbgCopy">复制</button>
<button id="dbgClear">清空</button>
<button id="dbgClose">收起</button>
</span>
@@ -134,6 +135,56 @@
el('dbgClose').addEventListener('click', function () { el('dbgPanel').classList.remove('open'); });
el('dbgClear').addEventListener('click', function () { el('dbgLog').innerHTML = ''; dbgCount = 0; el('dbgCount').textContent = ''; });
// 复制日志:拼纯文本(时间 + 内容),Clipboard API 优先,失败/不可用则降级 execCommand
function copyWithFallback(text) {
try {
var ta = document.createElement('textarea');
ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
document.body.appendChild(ta); ta.select();
var ok2 = document.execCommand('copy');
document.body.removeChild(ta);
return !!ok2;
} catch (e) {
return false;
}
}
// 终极大兜底:两种 API 都失败时,弹出一个可全选/长按的文本区让用户手动复制
function manualCopy(text) {
dbg('自动复制不可用,弹出文本区请长按/全选复制 ↓', 'warn');
var box = el('dbgManual');
if (!box) {
box = document.createElement('div');
box.id = 'dbgManual';
box.style.cssText = 'position:fixed;left:10px;right:10px;top:10px;z-index:300;background:#fff;border:2px solid #F4593C;border-radius:12px;padding:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);max-height:70vh;display:flex;flex-direction:column';
box.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">' +
'<b style="color:#F4593C;font-size:13px">手动复制日志</b>' +
'<button id="dbgManualClose" style="border:1px solid #ddd;background:#fff;border-radius:6px;padding:2px 10px">关闭</button></div>' +
'<textarea id="dbgManualText" style="flex:1;width:100%;min-height:180px;border:1px solid #eee;border-radius:8px;padding:8px;font-family:Menlo,Consolas,monospace;font-size:12px" readonly>' +
text.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</textarea>' +
'<div style="font-size:11px;color:#999;margin-top:6px">提示:微信里长按文本 → 全选 → 复制。</div>';
document.body.appendChild(box);
el('dbgManualClose').addEventListener('click', function () { box.parentNode.removeChild(box); });
var t = el('dbgManualText');
setTimeout(function () { t.focus(); t.select(); }, 300);
}
}
el('dbgCopy').addEventListener('click', function () {
var text = '';
var lns = el('dbgLog').querySelectorAll('.ln');
for (var i = 0; i < lns.length; i++) {
var t = (lns[i].querySelector('b') ? lns[i].querySelector('b').textContent : '');
text += t + ' ' + lns[i].textContent.replace(t, '').trim() + '\n';
}
text = '[wx-h5-demo 调试日志 v' + VER + ']\n' + text;
function ok() { dbg('已复制 ' + lns.length + ' 条日志到剪贴板', 'ok'); }
function fallback() { if (copyWithFallback(text)) ok(); else manualCopy(text); }
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(ok, function () { fallback(); });
} else {
fallback();
}
});
function show(tag, title) {
el('envTag').textContent = title; el('envTag').className = 'tag ' + (tag === 'ok' ? 'ok' : 'no');
}