Making WeChat Mini Programs

“The post-app age.”

“The WeChat OS.”

“350M Daily Active Users.”

Meeting much scepticism upon their release in 2017, 60% of WeChat users are now engaging with WeChat mini programs (MPs) with 67% using MPs more than 4 times per day.

For our latest project with the Embassy of France in China, our developers embraced the language of WeChat mini programs.

Goal: Create a WeChat mini program that facilitates French language learning in China through French cinema.

Meet CinéFLE

The CinéFLE WeChat mini program is designed to encourage French learners to improve their skills through the medium of French cinematography. Users can choose from eleven recent French productions, watch clips from the film and take gamelike quizzes to test their knowledge of the main characters and vocabulary from the film.

Choose from 11 French films

Watch clips from the film and read about the main characters

Test out your knowledge!

Get your results and see how you rank

Why a mini program?

From a UX perspective (for the people who use it), mini programs feel more like an app.

From a technical perspective, MPs can be developed faster and for a lower cost than apps. A major reason is that there is no need to develop both an Android and Apple version, and the development is much more similar to web development than app development.

Requirements:

Website: domain name and server

optional: ICP, SSL certification

Mini program: mini program account registration and verification, domain name, server, ICP, SSL, API must come from HTTPS

Coding Language:

Website frontend: HTML and CSS

Mini program: WXML and WXSS – similar to HTML and CSS, but is specific to WeChat mini programs

Frontend developers can learn WXML and WXSS relatively quickly, but features that would normally be extremely easy and fast to implement on a website will take some extra time to become familiar with ie. a calendar or dropdown component. Developer tools can be found on WeChat’s Official Developer Site.

Browser:

Websites can be rendered on the browser of the developer’s choice.

WeChat mini programs can only be rendered in the WeChat developer tool and tested on the WeChat app. Fortunately a recent release has added the option for English in the web developer tool interface.

Why does it function more like an app than a website?

A website loads a page from the top to the bottom – thus the page won’t be fully displayed until all information including the layout and data is fully loaded.

For MPs and apps, the layout and data are split, so the layout arrives quickly without having to wait for the data. This is why when you open a MP you can see everything, but perhaps nothing happens when you select something.

Outcome:

• Successfully implemented into French programs throughout China
• 13k players to date

Scan the QR code to play

Scope:

• UX concept
• Mobile design
• WeChat mini program development
• Language: French and Chinese