wx-h5-demo: 加调试日志面板(环境检测/postMessage/异常捕获) 便于真机排查授权无响应

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>