前言

前段时间在项目中做了一个推送消息到H5的功能，在此记录一下，有兴趣或者需要的朋友可以看看。其实代码不难，我觉得对于初学者来说难的是一些概念和具体的实现流程。所以我会先用微信提供的测试接口先把流程过一遍，后面再贴出相应的实现代码。这样无论是你还是我，对整体流程的实现都会有更清晰的认识。如果有不对的地方，还请指出（拳头感谢）

效果图如下：

文章标题

目录

1. 概念

我觉得在对接第三方接口之前，一定要先搞清楚文档里一些关键词的概念和含义，这样看文档的时候才不会一头雾水（其实我做的时候看第三方接口文档也是一头雾水，尤其是微信的，这里吐槽一下阿里的文档比较好，通俗易懂）

这里就不多说了，简单介绍一下这个功能用到的几个概念：微信服务号 官方文档链接

这里我们就只说重点，其他的就不多说了。

1.

是公众号全局唯一的接口调用凭证，公众号调用各个接口时必须使用。

这句话是官方说的，其实我们可以理解为：它是服务账号的身份证，具有唯一性，而这个凭证需要我们的服务账号和两个值才能获取。其实还有一个值，这里就不多说了，网上有很多介绍，拿到后填上去就可以了。

2.

只要我们开通服务账号，就可以获得第三方用户的唯一凭证。

3.

第三方用户的唯一凭证密钥，即

官方介绍如下：

而我们在注册服务账号的时候就可以获取到，那么有了这两个值，我们就可以通过这两个值去请求官方的链接来获取我们的

2. 获取

对于学习者来说，申请一个服务号还是很有难度的，所以微信官方很贴心的给我们准备了一个测试接口：微信开发测试接口，进入这个链接，使用微信扫描二维码登录，就可以获得：

然后我们就可以通过微信提供的测试接口填写我们的，并获取我们的，默认有效期是两个小时，如下

3.添加消息模板

上面的第一步我们已经完成了，但是这还不够，如果我们需要给关注我们服务号（公众号）的用户发送消息，我们需要一个消息模板，模板就是在这里添加的。

为了帮助初学者，我将我的测试模板内容放在这里供您直接复制。

{{first.DATA}} 通知内容：{{keyword1.DATA}} {{remark.DATA}}

4. 获取用户的

关于这个我要特别说明一下，是针对用户的，和我们的服务号没有关系（我一开始对这个很困惑）。只要我们在微信上关注了一个公众号，那么这个公众号就会给我们的微信分配一个唯一的号码。这里要注意的是，即使我们取消了关注，第二次关注还是和之前一样，不会有变化。

因为我们要通知指定用户，所以我们需要获取该用户的

5. 测试

OK，现在一切准备就绪，我们可以直接测试一下了。照例，打开我们的微信调试工具

1.首先获取我们的输入和密钥，直接点击获取，然后会自动生成，我们复制下来保存即可

2.向用户发送详细信息，然后获取消息内容

以上就是大概的流程和思路，知道了具体的实现过程，写代码也不难，代码放在第二章

【微信开发第一章】实现微信公众号创建菜单，并同步菜单功能：

【微信开发第二章】实现微信公众号普通消息及模板消息回复：

【微信开发第三章】实现微信授权登录