wx-h5-demo: 加调试日志面板(环境检测/postMessage/异常捕获) 便于真机排查授权无响应
This commit is contained in:
133
index.html
133
index.html
@@ -24,6 +24,22 @@
|
||||
.hint{font-size:12px;color:#A79C95;margin-top:12px;line-height:1.6}
|
||||
#toast{position:fixed;left:50%;bottom:14%;transform:translateX(-50%);background:rgba(30,22,18,.9);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:99}
|
||||
#toast.show{opacity:1}
|
||||
|
||||
/* ==== 调试日志面板 ==== */
|
||||
#dbgToggle{position:fixed;right:12px;bottom:12px;z-index:200;background:#2B2320;color:#fff;border:none;border-radius:20px;padding:9px 14px;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer;opacity:.92}
|
||||
#dbgPanel{position:fixed;right:0;bottom:0;left:0;z-index:210;background:#1A1512;color:#E7DAD1;font-family:Menlo,Consolas,monospace;font-size:12px;line-height:1.5;border-top:2px solid #F4593C;transform:translateY(100%);transition:transform .25s;max-height:62vh;display:flex;flex-direction:column}
|
||||
#dbgPanel.open{transform:translateY(0)}
|
||||
#dbgHead{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#241D18;border-bottom:1px solid #3A2F28}
|
||||
#dbgHead b{font-size:13px;color:#F4593C}
|
||||
#dbgHead span{font-size:11px;color:#A79C95}
|
||||
#dbgHead button{margin-left:8px;background:none;border:1px solid #4A3D34;color:#E7DAD1;border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer}
|
||||
#dbgLog{overflow-y:auto;padding:8px 12px;flex:1;word-break:break-all}
|
||||
#dbgLog .ln{margin:3px 0;padding:3px 6px;border-left:3px solid #4A3D34;color:#CBBDB2}
|
||||
#dbgLog .ln.err{border-left-color:#F4593C;color:#FF9E86;background:rgba(244,89,60,.08)}
|
||||
#dbgLog .ln.ok{border-left-color:#5F8A4A;color:#9BC48A}
|
||||
#dbgLog .ln.warn{border-left-color:#E0B33E;color:#EED49A}
|
||||
#dbgLog .ln.muted{color:#8B7E75;border-left-color:#3A2F28}
|
||||
#dbgLog .ln b{color:#fff;font-weight:700}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -55,39 +71,126 @@
|
||||
</div>
|
||||
<div id="toast"></div>
|
||||
|
||||
<!-- 调试日志面板 -->
|
||||
<button id="dbgToggle">🐛 调试日志</button>
|
||||
<div id="dbgPanel">
|
||||
<div id="dbgHead">
|
||||
<b>调试日志</b>
|
||||
<span id="dbgCount"></span>
|
||||
<span>
|
||||
<button id="dbgClear">清空</button>
|
||||
<button id="dbgClose">收起</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="dbgLog"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
||||
<script src="wx-auth.js"></script>
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
function $(s) { return document.querySelector(s); }
|
||||
|
||||
/* ============================================================
|
||||
① 日志面板（真机上 console/alert 看不到，用可视化面板）
|
||||
============================================================ */
|
||||
var dbgCount = 0;
|
||||
function el(id) { return document.getElementById(id); }
|
||||
function dbg(msg, cls) {
|
||||
dbgCount++;
|
||||
var logBox = el('dbgLog');
|
||||
var ln = document.createElement('div');
|
||||
ln.className = 'ln' + (cls ? ' ' + cls : '');
|
||||
var t = new Date().toTimeString().replace(/.*(\d\d:\d\d:\d\d).*/, '$1');
|
||||
ln.innerHTML = '<b>' + t + '</b> ' + msg;
|
||||
logBox.appendChild(ln);
|
||||
logBox.scrollTop = logBox.scrollHeight;
|
||||
el('dbgCount').textContent = '共 ' + dbgCount + ' 条';
|
||||
try { console.log('[dbg]', msg); } catch (e) {}
|
||||
}
|
||||
function dbgErr(msg) { dbg('❌ ' + msg, 'err'); }
|
||||
window.__dbg = dbg;
|
||||
|
||||
// 全局错误捕获
|
||||
window.addEventListener('error', function (e) {
|
||||
dbgErr('window.onerror: ' + (e.message || '未知') + ' @ ' + (e.filename || '') + ':' + (e.lineno || '') + ':' + (e.colno || ''));
|
||||
});
|
||||
window.addEventListener('unhandledrejection', function (e) {
|
||||
var r = e.reason;
|
||||
dbgErr('unhandledrejection: ' + (r && (r.message || r.stack) ? (r.message || r.stack) : r));
|
||||
});
|
||||
|
||||
// 面板开关
|
||||
el('dbgToggle').addEventListener('click', function () { el('dbgPanel').classList.toggle('open'); });
|
||||
el('dbgClose').addEventListener('click', function () { el('dbgPanel').classList.remove('open'); });
|
||||
el('dbgClear').addEventListener('click', function () { el('dbgLog').innerHTML = ''; dbgCount = 0; el('dbgCount').textContent = ''; });
|
||||
|
||||
function show(tag, title) {
|
||||
$('#envTag').textContent = title; $('#envTag').className = 'tag ' + (tag === 'ok' ? 'ok' : 'no');
|
||||
el('envTag').textContent = title; el('envTag').className = 'tag ' + (tag === 'ok' ? 'ok' : 'no');
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
② jweixin / wx.miniProgram 环境检测（先记录关键前提）
|
||||
============================================================ */
|
||||
dbg('脚本初始化开始');
|
||||
dbg('jweixin 已加载: window.wx = ' + (typeof window.wx !== 'undefined' ? '✅ 存在' : '❌ 不存在(CDN 加载失败或未进入微信环境)'));
|
||||
dbg('window.wx.miniProgram = ' + ((window.wx && window.wx.miniProgram) ? '✅ 存在' : '❌ 不存在'), 'muted');
|
||||
dbg('navigator.userAgent 含 MicroMessenger: ' + (/MicroMessenger/i.test(navigator.userAgent) ? '✅ 是' : '❌ 否'), 'muted');
|
||||
dbg('location.hash = ' + (location.hash || '(空)') + ' location.search = ' + (location.search || '(空)'), 'muted');
|
||||
|
||||
// 给 postMessage 打补丁：记录每一次调用 + 捕获异常
|
||||
var origPost = (window.wx && window.wx.miniProgram && window.wx.miniProgram.postMessage) ? window.wx.miniProgram.postMessage.bind(window.wx.miniProgram) : null;
|
||||
if (window.wx && window.wx.miniProgram) {
|
||||
window.wx.miniProgram.postMessage = function (msg) {
|
||||
dbg('postMessage 调用 → ' + JSON.stringify(msg), 'ok');
|
||||
if (!origPost) { dbgErr('postMessage: 无原始方法，无法发送'); return; }
|
||||
try { origPost(msg); dbg('postMessage 已发送', 'ok'); }
|
||||
catch (ex) { dbgErr('postMessage 抛异常: ' + (ex && ex.message ? ex.message : ex)); }
|
||||
};
|
||||
} else {
|
||||
dbg('未安装 postMessage 补丁（wx.miniProgram 不存在）', 'warn');
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
③ 页面数据渲染
|
||||
============================================================ */
|
||||
function render(a) {
|
||||
// 已授权 → 展示；未授权 → 显示「授权登录」
|
||||
var authed = a.isAuthorized();
|
||||
$('#authState').textContent = authed ? '✅ 已授权（昵称/头像/手机号）' : '🔓 未授权，点下方「授权登录」';
|
||||
$('#btnAuth').style.display = authed ? 'none' : 'block';
|
||||
// 展示回传结果
|
||||
$('#rPhone').textContent = a.readAuth().phone || '—';
|
||||
$('#rNick').textContent = a.readAuth().nickname || '—';
|
||||
if (a.readAuth().avatar) { $('#rAvatarWrap').innerHTML = '<img src="' + a.readAuth().avatar + '" alt="头像">'; }
|
||||
dbg('render(): isAuthorized=' + authed + ' readAuth=' + JSON.stringify(a.readAuth()), 'muted');
|
||||
el('authState').textContent = authed ? '✅ 已授权（昵称/头像/手机号）' : '🔓 未授权，点下方「授权登录」';
|
||||
el('btnAuth').style.display = authed ? 'none' : 'block';
|
||||
el('rPhone').textContent = a.readAuth().phone || '—';
|
||||
el('rNick').textContent = a.readAuth().nickname || '—';
|
||||
if (a.readAuth().avatar) { el('rAvatarWrap').innerHTML = '<img src="' + a.readAuth().avatar + '" alt="头像">'; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
④ 初始化：环境检测 + 读取授权
|
||||
============================================================ */
|
||||
function init() {
|
||||
wxAuth.init(function (a) {
|
||||
// 环境
|
||||
var envTxt = a.inWebview ? '小程序 web-view' : (a.MODE === 'wechat-browser' ? '微信浏览器' : '纯浏览器');
|
||||
$('#envTxt').textContent = envTxt;
|
||||
// 环境 tag：已授权才 ok
|
||||
dbg('init 回调: envTxt=' + envTxt + ' MODE=' + a.MODE + ' inWebview=' + a.inWebview, 'ok');
|
||||
el('envTxt').textContent = envTxt;
|
||||
render(a);
|
||||
});
|
||||
// 授权后（宿主更新 src，本页重载）→ 由 init 里 readAuth 拿到
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
init();
|
||||
$('#btnAuth').addEventListener('click', function () { wxAuth.requestProfile(); });
|
||||
$('#btnMall').addEventListener('click', function () { wxAuth.goMall(); });
|
||||
el('btnAuth').addEventListener('click', function () {
|
||||
dbg('🖱️ 点击「授权登录」按钮');
|
||||
if (!(window.wx && window.wx.miniProgram)) {
|
||||
dbgErr('requestProfile 被拒绝：window.wx.miniProgram 不存在（不在微信 web-view 或 jweixin 未加载）');
|
||||
} else {
|
||||
dbg('requestProfile 前置检查通过（wx.miniProgram 存在），开始发送 postMessage', 'ok');
|
||||
}
|
||||
wxAuth.requestProfile();
|
||||
});
|
||||
el('btnMall').addEventListener('click', function () {
|
||||
dbg('🖱️ 点击「进商城」按钮');
|
||||
wxAuth.goMall();
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user