![042b5629a6b2cb1d011644021c23d4a4.png](https://i-blog.csdnimg.cn/blog_migrate/57a0ed4ed56592436a7e700d70a33c88.jpeg)
【摘要】在日常项目开发中,如果小程序想要推送消息时采用小程序自带的会有很多限制,所以通常使用公众号来发送,所以就要用到公众号和小程序绑定
【作者】田鋆鹏
最近在项目开发中使用了H5和小程序相关联的东西,在开发过程中遇到了一些问题和收获,由于最近的一个小程序项目需要进行推送消息,但是由于小程序是小程序发送模板消息有很大的局限性,小程序发送模板消息需要收集用户提交表单生成的formId,而这个formId只能使用一次,且有效时间为七天,也就是说你不能主动通过微信向用户发送消息,只有当用户主动触发表单事件,你拿到生成的fomId才能调用API发送消息,所以用起来很不方便,所以改用小程序绑定公众号,通过公众号来发送模板消息,但是这样的话就要将公众号和小程序绑定起来,具体的相关绑定操作如下:
公众号与小程序绑定主要分为两大部分,第一部分为微信公众平台的操作; 第二部分为代码的操作
一、微信公众平台
1. 登录微信公众号,打开-小程序管理
![d0b69b7c970ce484649b0c08abf7f970.png](https://i-blog.csdnimg.cn/blog_migrate/0814ec92a7fcfcf2e1a635ae98d0beba.png)
2. 点击添加
![72aa337c67b31f4990c688c3fdc05bd2.png](https://i-blog.csdnimg.cn/blog_migrate/757e5b6e9154c422777f53990a8d7da4.png)
3. 点击关联小程序
![fa70f15113a8fa133cab377d0ddf5359.png](https://i-blog.csdnimg.cn/blog_migrate/c28b6e7645ceb406a858c9359dd40be8.jpeg)
4. 输入小程序的AppID,验证后即可完成小程序和公众号的绑定
![6474ff9b1cb6b882cb90bcccbf5008ce.png](https://i-blog.csdnimg.cn/blog_migrate/ea3539035303ac874a88a65304b0be06.png)
以上步骤完成以后,还需要登录微信开放平台
5. 登录微信开放平台,进入——管理中心页面——公众账号
![36a24bf84768592b018b9a125ba40a9f.png](https://i-blog.csdnimg.cn/blog_migrate/6758199a46c77f78333c1e66bc27524d.png)
6. 点击绑定公众号
![38b4845b95f7adca853cc0dd0975172b.png](https://i-blog.csdnimg.cn/blog_migrate/ea01809ad8f96b651a931c79bfbd594a.jpeg)
按照上图步骤输入公众号基本信息——进行扫码验证——绑定成功
7. 切换到小程序页面
![6a6e507139bddc605cb4f13201e8f001.png](https://i-blog.csdnimg.cn/blog_migrate/bfc769e94c99fbc9bcb1577c67332b7a.png)
8. 点击绑定小程序
![732f5e8b6f952ec6f492e706eeeaacdf.png](https://i-blog.csdnimg.cn/blog_migrate/661275d69f5ecd787b0da1a16b74e800.png)
同样按照上图步骤即可完成小程序的绑定
至此, 在微信公众平台和微信开放平台中, 小程序和公众号就已经完成绑定,后续需要的就是通过代码来实现小程序和公众号的绑定,进而来实现消息推送的功能
二、 代码部分
其实公众号和小程序的绑定最为重要的就是要拿到公众号与用户对应的openid,这个openid和你在小程序里获得的openid不一样,小程序得到的openid是用户与你的小程序对应的唯一id,所以调用公众号发送模板消息接口自然要使用用户对应公众号的openid。
那么怎么在小程序里获得用户对应公众号的openid呢?
我这边的操作是: 由于我这边的小程序用户需要绑定手机号,所以在手机号绑定成功后会跳转到公众号授权页面,进行静默授权,用户在此时只能看到一个空白页,此后后台的接口就可以接收到授权成功传给我的参数,但是在小程序里就无法跳回主界面了,我们使用了一个按钮,用户可以通过按钮来返回小程序主页
![e3e96fb2227c1f22e10d2e3b115fff70.png](https://i-blog.csdnimg.cn/blog_migrate/8169922c3edf35850702835dfd0be7f3.png)
H5端的代码如下:
![8a779bc8c89375f56af0c337d965cb0f.png](https://i-blog.csdnimg.cn/blog_migrate/55e38a9b411753282147eaa4437b2937.jpeg)
这里需要在公众号配置授权回调页面域名,你的redirect_uri必须在此域名下
重点来了,你必须在微信开放平台创建账号并将你的小程序和服务号绑定在其下,这样你就可以获取unionid,unionid对应开放平台下的小程序和公众号是唯一的,也就是说一个微信用户在你的小程序中的onionid和在你公众号下的onionid是相同的,这样我们就可以在用户登录小程序时获得用户的openid和unionid,在完成授权后又可以调用接口获得openid2和unionid,通过unionid我们就可以将小程序用户和公众号用户关联起来,换句话说就是你可以通过查询unionid知道完成网页授权的用户是你的哪个小程序用户了,然后把openid和unionid存到数据库中, 这样小程序和公众号的绑定就基本完成了
后续如果需要进行消息推送的话就只需要去模板库中挑选模板id即可
![68c47574ae92d9c404cc63dc55541d81.png](https://i-blog.csdnimg.cn/blog_migrate/e7724f5660bb8e70f125d8241fdb83a5.jpeg)
-----------------------------------------------------------------------------------------------
2020.09.17 更新ing
之前对公众号和小程序的绑定做了理论性的分析,下面拿做过的一个项目进行案例展示,在做过的酒寻知己的项目中,公众号和小程序的绑定修改了很多次,
因为公众号和小程序的绑定需要先通过授权,拿到unionid, 所以在绑定公众号之前最主要的是要让用户通过授权,拿到用户信息
第一次实现: 已进入首页就要求用户进行绑定, 这样的方法虽然实现了公众号和小程序的绑定,但是违反了小程序的规则, 现在小程序的规则是不能强制要求用户进行授权等操作,必须是让用户主动的通过点击实现授权等操作, 所以就有了第二次修改
第二次修改: 第二次修改的时候就让用户首先进入到小程序中,然后在用户进行支付前或者是创建酒局的时候判断用户有没有进行授权,如果已经授权过了,那么久就可以进行相关的操作; 如果没有授权获取信息, 那么就先获取用户信息, 然后在授权完成后再去绑定公众号,这样就可以确保绑定小程序是可以正常准确的绑定公众号的, 这样虽然通过了审核, 但是与项目的需求就有了一些冲突, 因为这一系列的操作是没有绑定用户手机号的, 所以与项目的需求就有了一些出入, 所以就有了第三次的修改
第三次修改: 第三次的修改和第二次的基本相似, 第二次是判断用户有没有授权, 而第三次的修改是判断用户有没有绑定手机号, 如果绑定了, 就再判断用户有没有授权, 如果没有授权就进行授权和绑定公众号, 如果手机号绑定了且也进行了授权和绑定, 那么就可以进行下边的操作了 (购买或新建酒局); 如果用户没有绑定手机号, 就会先让用户去绑定手机号, 手机号绑定成功后才能进行授权和绑定
第三次修改完成后已基本可以实现项目的需求了, 首先是用户的手机号是一定有的且是绑定过的, 其次是用户的信息也是通过授权来拿到的, 最后是用户在授权过后也是和公众号绑定在一起的, 后续如果需要接受公众号消息, 就只需要关注项目的公众号就可以了
【田甜补充】
- yongzheng项目中,存在的问题
客户最初部署好小程序,无需和公众号打通;因此没有union_id, 小程序和公众号的核心,在于通过union_id进行绑定, 如果缺乏这个前提条件,后面都会注定非常悲剧.
====》 解决方法: 获取到id_union之后,马上删除一个账号
2. jiuxu项目存在的问题
小程序进来的时候,可以拿到小程序的ID,但没有授权,就偶尔不可以拿到id_union, 直到彻底授权打开(公众号授权是没有该问题的)
=====》 小程序进来之后, 先让用户授权小程序信息, 然后再打开empty_jump获取到公众号的信息,两者就可以合并打通
【清泓补充】
![a53687029ea7965750f4fb9745fbc143.png](https://i-blog.csdnimg.cn/blog_migrate/b1f70ba220aec6ee2cbbdc74626857d5.jpeg)
公众号关联大家在上面文中应该非常清楚了。
但请大家再看一下一个细节性问题。遇到一个公众号,一个商户号,需要绑定多个小程序的操作的时候。我们在商户号里绑定其他小程序的时候,通常会遇到一个情况:就是提示小程序尚未被认证。
乍回过头来一看,确实,小程序确确实实没有被认证,那么,在面对很多个小程序都需要认证的情况的时候,我们难道一个个去进行复杂的认证?不可能的!
仔细一看公众号平台,其实对于这么一个大平台来说,确实为我们提供了快速认证的通道。话不多说,看下图:
![2b44ef952b543bf57e073d33347a8e07.png](https://i-blog.csdnimg.cn/blog_migrate/b66db83861cbf855fd40232e33420a16.jpeg)
鼠标滑到已关联的小程序上,发现有一个详情二字,然后我们点击。
![03d424ad502151fe4a161c5143906129.png](https://i-blog.csdnimg.cn/blog_migrate/8e1be18606b157cc9d68451241f81b8a.jpeg)
让我们复用一下,岂不是666!!!
![fdaf9b2671c8346218b3ed44335453d5.png](https://i-blog.csdnimg.cn/blog_migrate/ef8fe69eeac54a18b53c76f1531b2cff.jpeg)
对的,就这么简单,相信能为大家节省不少时间,谢谢浏览!!!
欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏, 必须干货!
互联网创业专栏 (我们小伙伴的创业历程)
与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)
互联网产品研发管理 (我们公司对产品结构的管理思路)
产品君的案例库(产品小伙伴深刻总结)