4 min read
Photo by Thought Catalog on Unsplash

In the past, I wrote an article about how to send template message for WeChat Mini-Program:

https://medium.com/china-software-development/how-to-send-template-message-for-wechat-mini-program-856dbc4af7cc

Unfortunately, Tencent announced that they deprecate this way of sending a template message on January 10th, 2020.

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/template-message/templateMessage.send.html What has changed?
  1. Explicit permission pop-up

2. No more Form ID or Prepay ID is needed

Which means a message is not bound to a button or payment anymore.

3. One permission for one message except for the following industry:

Governmental, Medical, Transportation, Finance, Education

How to implement it?
  1. Setup Template in Mini-Program dashboard
  2. Add wx.requestSubscribeMessage to mini-program code
  3. Use this endpoint to send message POST <a href="https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN" class="fc cf hi hj hk hl" target="_blank" rel="noopener nofollow" style="text-decoration: none; color: inherit; background-repeat: repeat-x; background-image: linear-gradient(to right,rgba(0, 0, 0, 0.84) 100%,rgba(0, 0, 0, 0.84) 0); background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio='none' viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='0' x2='1' y2='1' stroke='rgba(0, 0, 0, 0.84)' /></svg>'); background-size: 1px 1px; background-position: 0 1.05em; background-position: 0 calc(1em + 1px);">https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN</a>
Add Template in Mini-Program Dashboard
  1. Click “subscription message” under “function” in the left sidebar
  2. Click on the green “Add” button
  3. Select the template you want to use

4. Select the keyword you wish to include in the template

5. Return to “My template” in the subscription message

6. Open the detail

7. Copy template id and take note of the keyword

8. Take note of the keywords

Note: Unlike the previous template message method, the variable key is not always “keyword” and number, but something like “name1” or “time2”, etc.

Mini-Program Code <span id="eb05" class="li id ds ba kv b ew lj lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-top: -0.09em; margin-bottom: -0.09em; white-space: pre-wrap;">wx.requestSubscribeMessage({ tmplIds: [''], success (res) { } })</span>

So no more formId is needed, you only need to pass in the template id which you need permission for.

Note: You can pass multiple template IDs. The users can check or uncheck the message they want to receive.

For the response, you will receive either “accept”, “reject”, “ban” for each of the template ids.

Backend Code

Here’s an example in NodeJS

<span id="1c55" class="li id ds ba kv b ew lj lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-top: -0.09em; margin-bottom: -0.09em; white-space: pre-wrap;">// Send message</span><span id="407f" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;">const message = {</span><span id="64b0" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "touser": "OPEN_ID_OF_RECEIVING_USER",</span><span id="d14f" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "template_id": "TEMPLATE_ID",</span><span id="361f" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "page": "/pages/index/index",</span><span id="e17c" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "data": {</span><span id="0bcb" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "name1": {</span><span id="0234" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "value": "Class Name"</span><span id="28a5" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> },</span><span id="4d1d" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "time2": {</span><span id="0943" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "value": "2015年01月05日"</span><span id="016d" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> },</span><span id="0c6b" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "thing3": {</span><span id="6f6a" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "value": "TIT创意园"</span><span id="21ca" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> } ,</span><span id="fa16" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "thing4": {</span><span id="2740" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> "value": "comment"</span><span id="8375" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> }</span><span id="6d09" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;"> }</span><span id="68a0" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;">};</span><span id="3bc5" class="li id ds ba kv b ew lm ln lo lp lq lk r ll" style="font-weight: 400; display: block; font-style: normal; color: rgba(0, 0, 0, 0.84); font-size: 16px; letter-spacing: -0.022em; font-family: Menlo, Monaco, 'Courier New', Courier, monospace; line-height: 1.18; margin-bottom: -0.09em; white-space: pre-wrap; margin-top: 1.41em;">const response = await axios.post(`https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${access_token}`, message);</span> Result

If you’re not in one of those special industry categories mentioned above, then for one permission, you will be able to send one message.

Links

Official Doc: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html

MP Code Example(Frontend):

https://github.com/davidyu37/wechat-mp-template-message-frontend

Backend Example:

Userland

You can control which message you wish to receive by going into the setting of the Mini-Program.

Conclusion

If you’re new to WeChat related development, here’s a free glossary for you to get up to speed.