Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/sekkei/www/www/blog/wp-content/themes/goblog/options/ReduxCore/extensions/customizer/extension_customizer.php on line 286

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/sekkei/www/www/blog/wp-content/themes/goblog/options/ReduxCore/extensions/customizer/extension_customizer.php on line 299

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/sekkei/www/www/blog/wp-content/themes/goblog/options/ReduxCore/extensions/customizer/extension_customizer.php on line 325

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/sekkei/www/www/blog/wp-content/themes/goblog/options/ReduxCore/extensions/customizer/extension_customizer.php on line 337

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/sekkei/www/www/blog/wp-content/themes/goblog/options/ReduxCore/extensions/customizer/extension_customizer.php on line 356
WeChat Mini Programs in 2022, Part 2 • Sekkei Studio BlogSekkei Studio Blog

All You Need to Know About WeChat Mini Programs in 2022, Part 2

In part one of this guide, we talked all about what WeChat mini programs are, and the latest trends and insights. In this part, we’re rolling up our sleeves and getting into practical advice for getting a mini program off the ground. To international brands it may appear daunting at first, the prospect of learning a new tech ecosystem, but it’s not as hard as it may appear, and the pay-offs are potentially huge.

We’re going to start with a bit of background, covering first the path for those more technically inclined, then showing an easier path for those who prefer to go a quicker, easier route. We’ll provide step-by-step instructions for getting the mini program launched on an official account, then finish by exploring some UX/UI considerations.

 

The Techy Way

There are two main ways to go about making a mini program. The first is to develop one from scratch, or hire a developer to do so on your behalf. WeChat mini programs are programmed in JavaScript, and languages that compile to JavaScript like TypeScript and Kotlin. WeChat mini games have API support for Canvas 2D and WebGL. These can be used in mini programs too, to render animations and graphics. For games development, the main options are China-based engines Cocos Creator, Egret and Laya.

One option: using Lambda AWS Gateway. Source: AWS

 

A couple of technical details to note. One, WeChat does not exactly run HTML5, instead using a simulated version that is often called simply H5. Prior to the launch of mini programs, H5-only pages ruled the roost, but are more or less being phased out. The H5 interpretation of HTML5 is still a holdover in some aspects of mini program scripting, however, and so it’s a good idea to get familiarized with the whole WeChat SDK. Two, CSS and DOM are not used by WeChat mini programs, meaning certain third-party libraries cannot be included. For full development documentation, in English, here.

 

How to Skip the Techy Way

The second way to make a mini program is to use an online tool, such as SXL, or if you want a simple e-commerce mini program, then Weidian. No technical experience or knowledge is necessary to use these tools, as they provide a simple editing interface, the kind of which one might expect from Western site-building platforms like WordPress or Squarespace.

 

SXL Editor

 

Using these tools requires an annual subscription, but even so, they tend to be a far cheaper option than hiring a developer, and a much faster option than developing a mini program independently. With that ease, however, comes trade-offs in terms of functionality and layout. These platforms have only a certain amount of customizability, so if you’re looking to stand out with something completely fresh, and design a unique UX or UI, this is not the way to go. If you want a simple app, however, they’re incredibly useful tools.

 

Linking to an Official Account

 

Source: ecommerceagencychina.com

 

Once the mini program is developed and ready to go, it’s time to get it linked up with WeChat.

  1. Register. Mini programs must be linked to the WeChat official account of a company registered in China. There are two main types of official account: subscription and service. For mini programs that are going to handle transactions, it is necessary to be linked with a service account. In order to open either account, it will be necessary to submit mainland business license information, details of a Chinese representative, and a bank account number. For verification, the cost is 300RMB.
  2. Authenticate. After an official account is open, linking the mini program is fairly straightforward, although this is one part of the WeChat backend that isn’t fully translated into English, so help from a Chinese-speaking colleague may be necessary. Below is an image of the screen you will be met with. Here, using the administrator account, you can register the applet to get its linking key (a passphrase that is used to identify and communicate with the mini program), and then use the key to create an account association.

 

 

  1. Set up menu. Have your mini program primed and ready to go on the official account menu, for easy access. Select the ‘Custom Menu’ tab in the backend, add an item, then select ‘Jump to Mini Program’. After clicking the ‘Select a Mini Program’ button displayed, you will be shown your linked mini program(s). See the images below. Publish the menu, and you’re done!

 

Link WeChat mini program to WeChat menu

Link WeChat mini program to WeChat OA menu

 

UX / UI Considerations

  1. Size constraints. Mini programs can be a maximum of 10mb. With native apps frequently exceeding the 200mb mark these days, this can be quite an adjustment. This has direct UX and UI consequences, as large media items and interactive elements must be limited. Pair back the desired app to the most important features, and possibly create multiple mini apps, as demonstrated by the McDonald’s architecture in the image below, for different functions.

 

McDonald’s WeChat mini programs

Source: UXPlanet.org

 

  1. WeChat norms. While there is a diverse range of mini programs out there, there are some fairly standard layouts that people have grown accustomed to. It is worth exploring existing mini programs to see what to replicate, so that users can easily navigate between different parts of the mini program.
  2. Tend towards minimalism. For the last couple of decades, the main UX/UI advice for international brands looking to launch websites or apps in China is that user preference is for maximalist design – as much information on the page as possible, as many options as possible. WeChat mini programs have heralded a shift here, towards a more minimalist approach, similar to Western apps.
  3. Analytics. WeChat helpfully provide a full range of analytic tools to track customer journeys. These are built into the backend. Once again, these are not fully translated into English, but with Google Chrome and/or a Chinese-speaking colleague they are relatively easy to interpret.

 

Get Personalized Support

For a more in-depth and tailored introduction, feel free to reach out to us here at Sekkei. Our team is experienced in helping from planning to execution, maintenance to analytics, and can offer advice on the legal side of operating mini apps.

 

David Henriques

Digital entrepreneur and co-founder of Sekkei Studio, a digital marketing agency in Shanghai, Paris and Hong Kong. More than 10 years of experience in helping the communication of foreign companies in China.

Leave a Reply