Super detailed steps for pushing wechat official account H5 messages

Preface

Some time ago, I made a project for H5 Message push function , It is hereby recorded that , Interested or needed friends can check , Because the code is not difficult , I think what is difficult for beginners is some concepts and specific implementation process , So I will use the test interface provided by wechat to go through the process first , The corresponding implementation code will be posted later , In this way, both you and I will have a clearer understanding of the implementation of the overall process , If there is anything wrong, please point out （ Hug and thank you ）

The renderings are as follows ：

Article title

---

1、 Concept

I think we must understand the concept of some keywords in the document before docking with the third-party interface , The meaning of , In this way, I won't be confused by the documents （ In fact, I was confused when I read the third-party interface documents , Especially wechat , Make complaints about it here. , Alibaba's documents are better , Easy to understand ）

I won't say much here , Briefly introduce several concepts used in our function ： Wechat service number official document link

We try to focus here , Nothing else
1、Access token
access_token The official account is the only global interface invoke credential. , Official account calls for interfaces. access_token.
This sentence is officially said , In fact, we can understand it as ：token It's the ID card of the service number , Have uniqueness , And this credential requires our service number APPID and secret These two values are obtained . In fact, there is another value ,grant_type, I won't say much about this value , There are many introductions on the Internet , obtain access_token Fill in client_credential that will do .

2、APPID
Third party user unique credentials , As long as we open the service number, we will have this thing

3、secret
Third party user unique credential key , namely appsecret

The official introduction is as follows ：

APPID and secret When we register the service number, we can get , So with these two values , We can use these two values to request the official link to get our token

2、 obtain Token

For learners , It's still hard to apply for a service number , therefore , Wechat officials are very considerate to give us the interface for testing ： Wechat development test interface 、 Go to this link , Log in with wechat scanning code , You can get ：APPID and appsecret 了
Then we can provide through wechat Test interface , Take us APPID and APPsecret Fill in , We can get our token 了 ,token The default validity period is two hours , as follows

3、 Add message template

We have taken the first step above , Then this is not enough , If you need to pay attention to our service number （ official account ） Send messages to users of , We need a message template , The template is added here

Here to take care of beginners , I put my test template content here for you to copy directly

{
    {
    first.DATA}}
 Inform the content ：{
    {
    keyword1.DATA}}
{
    {
    remark.DATA}}

4、 Get the user's openId

About openId, Here's a special note ,openId It is aimed at users , With our service number APPID It doesn't matter （ I got confused about this at the beginning ）, Our wechat only needs to pay attention to a official account , Then this official account will be assigned to our wechat openId, It's the only one , Here's the thing to note , Even if we cancel our attention , The second time I paid attention to that openid Or before , It won't change .

Because we are notifying the designated users , Then we need to get the user's openId

5、 test

good , Now we have everything , You can test directly , still , Open up our Wechat debugging tools
1、 Get our... First token, Input APPID And secret key , Click directly to get , Then it will automatically generate Token, We directly copy and retain

2、 Hang to send details to users , Then take token And message content

---

The above is the general process and idea , Know the specific implementation process , Then the code is not difficult to write , Write the corresponding code next time