Essential information: Detailed explanation of the key points of mini program development documents and design guidelines

This article mainly provides a detailed explanation of the development documents and design guidelines officially released by WeChat:

Mini Program Development Document

An overall introduction to the mini program development method, and provides an official example. If you are a developer invited to experience it, you can scan the code to experience the mini program.

Mini Program Design Guide

The regulations on mini program design specifications are quite comprehensive, from user experience, element style to layout. This reflects WeChat's emphasis on small programs and its huge capabilities. We are worried that if we open them rashly without restrictions, it will lead to serious product fragmentation.

Next, we start to introduce the specific contents of the two documents.

1. Mini Program Development Document

It is mentioned at the beginning of the document:

Supports calling WeChat’s native API, which can easily activate the capabilities provided by WeChat, such as acquiring users Messages, local storage, payment functions, etc.

In fact, several of the functions listed here can be implemented in previous public account development. For us, the key point of this sentence is "native" - ​​we can basically judge that components such as navigation bars and buttons are actually converted into native components through WeChat's middle layer, which will effectively improve the rendering speed and operation of the page. Efficiency, providing an experience closer to native App.

The demo program shows several new components, such as drop-downs, navigation bars, etc. Since the mini program also provides a combined language tool that is basically similar to HTML+CSS, we are not surprised by the new components. As long as you can think of it, developers should be able to implement more components through the development tools provided by WeChat.

2. Mini Program Design Guide

WeChat’s design specifications this time are more specific and profound. It is not clear whether the official will stipulate that the design needs to be in accordance with WeChat specifications, otherwise it will not be put on the shelves, but I Personally, I feel that as the ecosystem matures, it is not impossible to follow WeChat’s tough management style.

But from another perspective, WeChat provides a style definition language called WXSS (CSS is a subset of it), which provides users with very strong style customization capabilities, even if the design specifications are restricted. It shouldn't be too rigid either.

1. WeUI update

With new design styles and components, WeChat’s official front-end UI framework WeUI has also received a major update and has an independent io domain name: https: //weui.io.

This update also provides:

Sketch design control library: https://github.com/weui/weui-...

Photoshop design control library: https://wximg.gtimg.com/shake...

By providing design source files, designers can more easily participate in WeChat mini Programming process.

In order to better carry out consistent design, the latest design source file also provides corresponding font files. The Chinese fonts use Pingfang (iOS) and Siyuan Heidi (Android), and the English fonts are SF UI Display (iOS) and Robot (Android).

2. User experience specifications

The user experience specifications are also partially defined in the document. What is good and what is bad are explained. The reading experience of the document is acceptable.

We can get a glimpse of some important visual features of mini programs from the design specifications:

3. Hierarchy specifications

Although WeChat’s hierarchy is simple and there are no cool native animations, But this time the page level specification still reminds me of the amazing feeling of Google Material Design when it was first launched.

Similar to WeChat itself, the 4 levels of WeChat mini programs are easy to understand:

More information: Detailed explanation of the key points of mini program development documents and design guidelines. For related articles, please pay attention to the PHP Chinese website!