WeChat Mini Program “莫为新影” (Mowei Xinying)
Chapter 01
Overview
The mobile entry point for the company’s unified account (OIDC). Users log in with WeChat, then use the mini program to scan QR codes and log in to the main site on a computer, the admin console and products integrated with the platform; within the mini program they can manage authorized apps, logged-in devices, message notifications and their personal digital badge.
Chapter 02
Screenshots
03 images
From left: home, phone-number authorization login, digital badge (phone numbers and avatars have been masked for privacy)
Chapter 03 06 items
My work
-
Independently designed and developed a native WeChat mini program without any third-party UI component library; the two entry points, WeChat’s “Scan” and scanning inside the mini program, share one scan-transaction mechanism.
-
Cross-device QR-code login: the web side generates a mini program code carrying a one-time ticket, and after the user confirms in the mini program, login completes on the computer. Only the ticket’s hash is stored, it is valid for 120 seconds, its state advances atomically step by step, and an expired, cancelled or reused ticket cannot complete a login. The same flow is used for the main site, the admin side, OAuth authorization of third-party products and embedded login; embedded login uses a one-time polling token instead of cookies, and host origins must be registered in advance.
-
Mini program back end: WeChat login (code2session), quick phone-number verification and account linking, session management and generation of mini program codes for QR-code login, with rate limiting, audit logs and concurrency locks to prevent duplicate accounts from concurrent requests; avatar and nickname changes go through back-office review, and row locks keep submission, withdrawal and approval in order.
-
Account security and privacy: users must actively accept the agreements before logging in, with a record kept, and must accept again after the agreements are updated; viewing and revoking authorized apps; logged-in devices are grouped by model and can be logged out remotely, and a login from a new device triggers a reminder in the message center.
-
Digital badge: WXSS 3D flip, a parallax effect that follows the phone’s tilt, share posters generated with Canvas; first-come personal ID registration (uniqueness check, platform-reserved words, profanity filter, 30-day cooldown between changes).
-
Wrote 96 mini program logic tests, and used WeChat’s official compiler to check all templates and styles offline.
Chapter 04 08 items
Tech stack
- WeChat native mini program
- WXML / WXSS
- Canvas 2D
- Node.js
- Fastify
- Prisma
- PostgreSQL
- WeChat Open APIs