Resolving WeChat H5 Authorization Loops, Poster Generation, and Page Performance Tracking

Background : Enterprise WeChat has grown rapidly for business scenarios, offering advantages over personal WeChat for branding, client management, and marketing. The author shares lessons learned from developing a one‑to‑one tutoring app on Enterprise WeChat.

01. WeChat H5 page authorization loop : The home page initiates a non‑silent OAuth flow using window.location.replace(url) . After user consent, WeChat redirects to the activity page via REDIRECT_URI . Because the home page remains in the history stack, returning from the activity page triggers the OAuth flow again, causing an infinite loop.

Solution : Listen for the popstate event on the activity page and call the WeChat bridge WeixinJSBridge.invoke('closeWindow') when the user navigates back. This works on iPhone but requires a real user interaction (click, long‑press, etc.) on many Android devices due to WeChat’s security policy.

Compatibility work‑arounds : Prompt the user to click a modal, or integrate a third‑party library (e.g., jQuery Mobile) to capture native back gestures. The author also stores the OAuth code in sessionStorage and, on returning to the home page, checks for the code and closes the window directly.

02. Generating posters on the activity page : The team uses html2canvas (v1.0.0‑rc.4) to convert DOM elements into an image that includes background, avatar, nickname, and QR code. Key challenges include cross‑origin image loading, image clarity, text ellipsis, and full‑canvas rendering.

Cross‑origin handling : Enable useCORS: true in html2canvas, add crossorigin="anonymous" to every <img> , and ensure the CDN returns proper Access-Control-Allow-Origin headers. As a fallback, convert remote images to Base64 before drawing.

Image quality : Replace CSS background-image with <img> , set scale based on devicePixelRatio , and calculate canvas dimensions from the DOM size to avoid white borders on some devices.

Text overflow : Truncate long nicknames by measuring string length, hide overflow, and display an ellipsis manually before rendering to canvas.

Canvas completeness : Ensure the page is scrolled to the top before drawing, use PNG format for transparency, and avoid black blocks that appear when saving as JPEG.

03. iPhone 100vh scrolling issue : On iOS 8+ the 100vh unit exceeds the visible area due to the Safari UI. Switching to height: 100% or using min-height: 100vh with -webkit-fill-available resolves the problem.

04. Recording page load time (performance tracking) : The activity page records the time from navigation start to full load using the window.performance API. Metrics such as redirect time, DNS lookup, TCP handshake, response time, DOM parsing, white‑screen time, DOMContentLoaded, and loadEventEnd are extracted. Because loadEventEnd may not be available immediately on some devices, a delayed timer polls until the value appears.

Overall, the article provides a step‑by‑step guide, code snippets, and practical tips for building robust, cross‑platform WeChat H5 applications.