How to generate dynamic QRCode for WeChat Mini-Program?

Photo by NESA by Makers on Unsplash

Who knew that QRCode would be EVERYWHERE in China now. In 2009, the first implementation of QRCode in China was on the train ticket to prevent ticket fraud.

From wikipedia

Now you can’t go a day without seeing QRCode in China. You see it in restaurants, bikes, movie tickets, and even on toilets in case you want to report broken stalls.

So when your users scan a QRCode to open your Mini-Program, you don’t want to miss out the opportunity to make it personalized and straight to the point.

Speaking of being straight to the point, if you’re a developer, and you just want the code to figure it out yourself.

Here’s the repo: https://github.com/davidyu37/generate-mp-qrcode

Official Doc: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.createQRCode.html

If you’re not a tech person, here are some websites to help you generate dynamic QRCode for your Mini-Program:

草料小程序码生成器-助力开发者 快速生成带参数的小程序码

芝麻小程序二维码生成器

What do I need?

To generate a dynamic QRCode for your Mini-Program, you will need to have:

• App ID
• App Secret
• A published Mini-Program

*Note: You could still generate a QRCode image with unpublished Mini-Program or sandbox account, but you will see something like this:

How to get AccessToken?

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$APPID&secret=$APPSECRET

Why is there three different API?

To create QRCode, you can make a request to:

POST https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

Or this:

POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

Or this:

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

This is why it’s so confusing to do something that’s supposed to be simple. But don’t worry I will explain each one.

The Ordinary QRCode

POST https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

You will get a square QRCod, which you can generate up to 100,000

Tencent actually don’t recommend this, because it doesn’t look like a Mini-Program QRCode.

The Params

{
 path:"page/index/index",
 width:430
}

The path is the page that you want your Mini-Program to open when users scan.

The width defaults to 430 pixels. Min: 280px Max: 1280px

The Circular, but limited

POST https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN

You will get a circular QRCode, up to 100,000 as well.

The Params

{
 path: 'pages/index/index',
 width: 430,
 auto_color: false,
 line_color: { r: '000', g: '000', b: '000' },
 is_hyaline: false,
}

path and width are the same as above.

When auto_color is true, the lines default to black.

If you want to set your own color, make sure to set auto_color as false

is_hyaline means if you want your image to be transparent or not.

The Circular, unlimited

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

The Params

{
 scene: 'parameter_on_load',
 path: 'pages/index/index',
 width: 430,
 auto_color: false,
 line_color: { r: '000', g: '000', b: '000' },
 is_hyaline: false,
}

This is pretty much the same as the one above, with the exception of scene parameter and unlimited quantity.

scene are extra parameters that you wish to include in your QRCode.

You can access the scene in the onLoad method in your Mini-Program

Page({
  onLoad (query) {
    const scene = decodeURIComponent(query.scene)
  }
})

Which to use?

In my opinion, the last request seems to be the most complete and doesn’t have limits, so I am not sure why Tencent even have the other two API endpoints.

Use this:

POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

Want More Information?

Here’s a free PDF about WeChat development.