手把手教你学会微信公众号活动H5开发（附服务端代码）

时间：2023-07-24 18:36:01 | 来源：网站运营

时间：2023-07-24 18:36:01 来源：网站运营

手把手教你学会微信公众号活动H5开发（附服务端代码）：

背景

为了精细化运营用户，我们需要统计用户的站外访问情况。

1.绑定微信标识（openidX）&uid，支持以uid为标识向学员推送公众号信息。

2.在绑定契机中，将uid与用户微信访问h5的标识（openidA)关联起来，实现过往访问历史的同步和未来访问的监测。

openidX = 承担推送任务的公众号X下获取的openid。

openidA = 公众号“有道精品课”下通过网页授权获取的openid。 可能记录着用户以往访问任意h5的时间戳、页面各可视区域访问时长、每次访问的ip地址及ip解码等。

涉及端

服务端 - 微信标识的获取、关联、记录，绑定行为的记录。

盖亚系统 - 功能菜单扩充

数据中台- userinfo

前端 - uid绑定/解绑页

获取微信网页授权

第一步：用户同意授权，获取code

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

需要用户授权请参考

第二步：通过code换取网页授权access_token

首先请注意，这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token（该access_token用于调用其他接口）不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。

尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

请求方法

获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

业务中的逻辑

router接入路由如下，这里给微信一个可以握手的接口，有稳定返回，告知主体文件及token可用

router.get('/', WechatController.signature)util公用方法

生成https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 这种微信重定向所需要的链接。

controller

用户访问时便重定向到指定页面。同时可以带上用户的openid与state信息到重定向地址。这里我们使用cookie存储openid。

最终通过

router.get('/wxAuth', WechatController.wxAuth)接口获取微信授权后的用户信息及重定向地址

应用

公众号的接⼊并开发一款公众号管理系统：

1. 进⼊有道盖亚系统，点击右上⻆的新增公众号按钮。

2. 若你⽆权限则⽆法看到新增按钮。那么新增操作请联系管理员/技术支持开权限

3. 新增操作需要盖亚和公众号后台同时进⾏，⾸先进⼊测试公众号后台（https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index），打开开发栏⽬的基本配置看到如下

点击修改配置，看到如下

生产环境下配置条件微信公众平台同样是扫码登录

在基本配置中设置可访问集群的白名单，新增rancher中对应的ip即可

4. 打开盖亚操作系统的新增公众号按钮，如下（网易有道应用场景，可不看）

5. 你需要提供的填⼊盖亚的信息如下，到时候请复制粘贴该模板修改对应

内容提供给运维人员

• 接⼊公众号或⼩程序的名称
• 产品代号：约定代号为你公众号的拼⾳⾸字⺟，如测试公众号，代号为csgzh
• AppId：即你公众号后台看到的开发者ID（AppId）
• 密钥：开发者密码，应该永久保存，不要随便重置
• 原始Id：在账号详情的底部，以gh开头
• 接⼊token：约定与你的产品代号⼀致
• nonce_str：修改配置⻚⾯，随机⽣成的EncodingAESKey
• 公众号对应的学段：你的公众号对应的学段
• 负责⼈的Corp邮箱：负责该公众号的⼈的⼯作邮箱
• 负责⼈精品课账号：负责该公众号的⼈的精品课账号
• 接⼊的是⼩程序还是公众号：是或否

6 你需要填⼊公众号中的信息有如下

• URL：https://backend.youdao.com/
• token：约定与你的产品代号⼀致
• EncodingAESKey：随机⽣成，复制粘贴提供给盖亚信息录⼊模板
• 选择明⽂模式

7. 先将条⽬5的内容提供给盖亚，新增信息完成后，在再微信后台配置⻚⾯点击保存，此时会提示保存成功，点击启⽤。

8. ⼿动刷新Token，将以下IP地址添加到微信公众号后台的IP⽩名单后，重新刷新链接: https://host/getAccessToken?prod=？？？,

prod需要换成⾃⼰的产品代号

9. 接⼊⽹⻚授权，进⼊微信公众号后台，进⼊设置，公众号配置，功能设置，⽹⻚授权域名

a. 将⽹⻚授权域名设置为：https://backend.youdao.com/b. 下载下图⽂件放入可以读取到的地址，使用nginx重定向或者路由可访问即可，然后填写和上⾯⼀样的域名

盖亚系统的使⽤盖亚系统的主要作⽤是统⼀处理公众号⼀些消息的推送，和⼀些⽤户信息的沉淀与其他平台进⾏联动。主要包括：48⼩时push、定时客服消息推送、定时模板、消息推送、关键字回复、微信客服消息推送等。以及菜单管理、标签管理、⽤户打标签等。

接⼊盖亚系统的公众号，在设置学段后，教务系统中建课时，选择对应公众号，⽤户购课成功后，扫描关注购买成功⻚的公众号关注后，盖亚系统内部会⾃动绑定该⽤户精品课与公众号的关系，该关系⽅便后⾯相关⽤户在对应公众号的信息

推送

1. 客服消息 & 模版消息

• 客服消息：即普通的⽂字，图⽚，⾳频，视频，分享链接等，只有活跃⽤户才能收到消息，这⾥需要注意，如果在消息中设置a标签，请在使⽤href属性的时候使⽤单引号
• 模版消息：特定格式的消息，可以触达所有⽤户（活跃/⾮活跃），但是推送过于频繁，可能存在被封的情况

2. 活跃⽤户定义

⾮官⽅定义：48⼩时内，点击菜单，模版消息，推⽂，或者给微信公号发送消息的⽤户PUSH活动预想⽤户扫描带参⼆维码关注或⾃然关注公众号后，公众号能主动的推送⼀些预设的消息，此类消息为，客服消息。

填写对应的内容：

活动名称：即你本次想推⼴该公众号投放⼆维码时参与的活动名。

参与的课程ID：此字段填写的⽬的是为了⽅便后期查看活动相关的课程，但若与课程不想⼲，可以随意填写内容（后期开发可以改为⾮必填）活动开始与结束的时间，字⾯意思。

⾃然关注or带参⼆维码：若选择⾃然关注，则⽤户在⾃然情况下关注该公众号时，会被推送你这次设置的消息。若选择⽣成带参⼆维码，则会⽣成⼀个⼆维码，扫描该⼆维码产⽣的关注，会被推送你这次设置的消息。

带参⼆维码有效期：字⾯意思，过期⼆维码被扫码会被微信警告该⼆维码已经过期，

选择标签：该标签列表是你预设的标签，选择后，⾛你这设置的这条路径下产⽣的关注的⽤户会被划分到你选择的标签下。

消息内容： 可以设置多条，也可以设置⼀条。设置⼀条时，即就⽤户扫码进来⽴刻收到的内容。

客服列表：是你在微信公众号后台开启客服插件后，获取到的你预设的客服，这⾥的客服含义请查阅⽂档或者百度。

设置多条消息时，你可以设置延迟时间，若你想阶段性的推送消息，则可以设置较⻓时间，若你想⼀瞬间推送⼤量消息，则可以将间隔设置为很短。

3、关键字管理

顾名思义，可以设置关键字，⽤户可以通过关键字来触发消息的推送～

回复类型可以⽀持：⽂本、图⽚、链接

可以⾃⾏选择延迟多久回复内容，回复什么内容

菜单管理可以在盖亚系统中设置公众号的菜单，菜单官⽅限制，⼦菜单不多于5个，⽗菜单不多于3个

若之前在公众号设置过菜单，则在盖亚中可能有不兼容⽀持的类型，微信官⽅⽀持多种类型的菜单，但只给开发者提供了：点击、链接、⼩程序、⼦菜单

若你想设置点击后推送相关消息，那么可以设置点击类型，并且在关键字管理中，设置关键字⾃动回复，在盖亚的点击类型中填⼊关键字，即可实现点击菜单推送消息