Dazhong Dianping+ WeChat Mini Program Development Experience and Best Practices

Zhou Jiayi, a Meituan-Dianping engineer with three years of web front‑end experience, shares the development experience of the Dazhong Dianping+ mini program, which was launched on January 9 and attracted over two million visits on its first day.

The mini program provides two core services: a fast store‑search feature (search, category list, recommendation) that shows location, phone, reviews, dishes, etc., and a group‑purchase feature that recommends deals and completes transactions.

Key product characteristics include a hybrid implementation that resembles web development, a strict code‑size limit of 1 MB, a maximum of five nested pages, and no support for navigation to other apps, H5 pages, or mini programs.

Technical choices were made to keep the development simple yet engineered:

Separate development and build directories, using gulp to produce the final build that runs in the mini program.

Introduce a package.json for dependency and API version management, but avoid third‑party npm packages (only a copied Promise implementation is used).

Write code in ES6, enforce quality with eslint, and wrap the mini‑program JS‑API with Promise‑style helpers for easier error handling.

For rich‑text rendering the team adopted the wxparse方案, while remaining cautious about other component frameworks that add runtime overhead.

Several platform constraints were identified:

No npm package management, no React‑like component model, and no webpack‑style bundling.

The mini program runs on WebView, so JS and CSS compatibility must be considered.

To cope with platform differences, the team logs key actions similarly to web logs and uses device debugging and packet capture when needed.

Web service considerations include mandatory HTTPS with TLS 1.2+ and the recommendation to use Tencent Cloud’s mini‑program cloud services for small teams.

API versioning is handled by attaching the mini‑program version to each request, enabling backward compatibility.

Because the mini‑program environment lacks DOM/BOM, developers must adopt a data‑driven view update approach rather than direct DOM manipulation.

The five‑page limit is addressed through three strategies:

Optimizing the product interaction flow to stay under five levels.

Using redirectTo after the fifth page (suitable for specific scenarios).

Implementing a goBack ‑based routing system that keeps the main flow within five pages while handling navigation programmatically.

Code‑size optimization is crucial. The compiled package size is the sum of JSON, WXML, WXSS, and JS files converted to a single JS bundle. In the project, the raw size was ~370 KB, but after compilation it grew to ~540 KB.

Optimization methods include:

Compilation level: Reduce unnecessary code before compilation.

Build level: Manually compress JS, WXSS, and WXML; the built‑in 代码压缩上传 added ~100 KB in this case.

API level: Return minimal data from web APIs, performing formatting on the client side.

Development level: Reuse WXSS via @import, shorten class names, use URL‑based background images, modularize JS, and keep WXML minimal (each 4 KB reduction in WXML can save ~9 KB in the compiled bundle).

Recommended resources for further learning are the official WeChat Mini Program documentation, the WeChat Mini Program FAQ, and a community article titled “Removing the Mini Program’s Outer Shell – Architecture Analysis”.

In summary, the Dazhong Dianping+ front‑end team witnessed the evolution of WeChat mini‑programs from early internal testing to a mature ecosystem, appreciating the rapid feedback from the WeChat team and the continuous improvement of APIs and developer experience.