How to develop a WeChat Mini Program: requirements, tools, best practices, how is it different from a web application?

1. 101: how to develop a WeChat Mini App

Source: William Kwan
Source: Le Wagon
Source: Le Wagon

2. Before starting to create an Instant App

How to register a Mini App from mainland China – with a Chinese business license

WeChat Mini Program registered with a Chinese business license/entity

Register an account on WeChat Open Platform


How to register a Mini App from overseas – with a Foreign business license

WeChat Mini Program registered with a Foreign business license

Registering a WeChat Mini-Program Account as an Overseas Entity | November 2018 [Azoya]

Install IDE (Integrated Development Environment)

Download the IDE (Integrated Development Environment)

The IDE is development software provided by Tencent to write all the code as well as preview and test your Mini Program (in the recent version of the tool, the interface is also available in English)

Make sure the 3rd party services you are calling from your Mini Program got an ICP (Internet Content Provider) license

In order to host a digital platform in China, an ICP is required to comply with the law. This permit can be obtained via the hosting provider.

Depending on the Mini Program’s complexity, it may require to communicate with some third-party service(s) (Eg. data transfer).

These servers of these third-party services your Mini Program is interfacing must be under an ICP.

Whitelist the 3rd party service provider URL in WeChat Back-End

Depending on the Mini Program’s complexity, it may require to call 3rd party service providers.

In order to communicate with their servers, the request URL of the 3rd party services must be whitelisted in the WeChat admin back-end.

HTTPS

The communications between WeChat Mini Program front-end and the third-party service’s servers must be secured with HTTPS protocol.

3. Useful Github resources and repositories to get started with Mini Program development

4. Integrations

WeChat JS SDK

Some functionalities available with WeChat JS SDK can also be implemented in a Mini Program:

  • QRcode / barcode scanner
  • WeChat pay
  • WeChat login
  • Geolocation
  • Accelerometer
  • Interaction with WeChat card system
  • Template Message
  • Service center message
  • Interaction with iBeacons
  • Fapiao information
  • WeRun
  • etc…

Learn more about the WeChat native functionalities with JS SDK and how the brands can use them best in an eCommerce Mini Program

If a term on this page is unclear, here is a WeChat-related comprehensive lexicon: + WeChat APP: glossary, lexicon & definitions to learn the basics right

WeChat UnionID: what is the difference with OpenID? How to set it up?

UnionID is the unique user ID across every WeChat channel (Official Account, Mini Program, H5) that is bound to the same WeChat Open Platform account.

So for a given user, the UnionID is the same for every WeChat channel. However, the OpenID is different between the Official Account and Mini Program and H5.

WeChat Payment

Template messages

Multilanguage

How to make a (vanilla) multilingual Mini Program

5. WeChat Component development

How to develop a custom component

Everything you need to know about WeChat Mini-Program component | January 2020 [Medium – David Yu]

=> Official Documentation

6. User Interface (UI) development

UI Libraries

List of some UI libraries available depending on the chosen framework to speed up the UI integration.

  • Vant
  • TaroUI
    • Requirement to use TaroUI: Use React
  • WeUI = CSS framework for mpVue
  • TinaJS
  • Etc…

How to customize the top navigation bar

7. Performance optimization

8. Development frameworks

WeChat Mini Programs Development Frameworks (2018) - Le Wagon

9. What are the requirements? What do you need to create a WeChat Instant App?

10. You don’t need to develop them from scratch any longer: the Mini App ecosystem is commoditizing very fast

Mini Programs are commoditizing very fast, with: 

  • the emergence of use case focused drag and drop builders: e-commerce shops, loyalty programs etc.
  • maturing frameworks allowing to create multiple front-ends (H5, Mini Programs) from a unified codebase

  • Mini Program Generators (Drag & Drop UX) = sxl.cn

11. Performance measurement and analytics

12. FAQ to build a Mini Program

What is the list of the categories of Mini Programs you’re allowed to publish with a 个人 account?

Official list by WeChat Team

Where can you get the merchant ID and merchant APP ID for WeChat?

from WeChat payment platform

13. All in one place – essential reports to learn the basics on how to make a WeChat Mini App



In order to go further and learn more about WeChat Program Development, here is a list training related to WeChat Development: + Untitled Article

Updated on 2020-01-16

Article Attachments

Related Articles

Help us to improve this page!
Outdated information? Exclusive insights? Share with us what is missing!
Submit updates