微信H5页面判断用户是否已关注公众号,以及唤起关注公众号页面

之前做了一个微信H5页面抽奖的小功能,产品需求是用户在进入页面后判断用户是否已经关注此公众号,若没有关注,则唤起关注公众号页面。

一、前期微信公众平台配置:

1、获取appid,appsecret,添加白名单

(1)登录微信公众平台——>开发——>基本配置。开发中需要用到两个参数,appId和appSecret(appSecret只展示一次,需保存下来,否则需要重置获取)。

微信H5页面判断用户是否已关注公众号,以及唤起关注公众号页面_第1张图片

(2)获取access_token时需要添加IP白名单。

2. 添加网页授权

进入公众号设置——>功能设置——>网页授权域名

二、服务端判断用户是否关注公众号

1、获取全局access_token(access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效)

微信开放文档说明:https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

微信H5页面判断用户是否已关注公众号,以及唤起关注公众号页面_第2张图片

2、网页授权获取用户openid

微信开放文档说明:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

(1)用户同意授权,获取code

引导用户打开以下链接:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

(2)通过code换取用户openid

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

3、获取用户基本信息

微信开放文档说明:https://developers.weixin.qq.com/doc/offiaccount/User_Management/Get_users_basic_information_UnionID.html#UinonId

使用获取到的全局access_token和用户openid去请求获取用户基本信息接口:

微信H5页面判断用户是否已关注公众号,以及唤起关注公众号页面_第3张图片

在返回参数中:

subscribe 用户是否订阅该公众号标识,值为0时,代表此用户没有关注该公众号,拉取不到其余信息。

三、H5页面唤起关注公众号页面

上面已经说明如何判断用户是否已经关注公众号,那如何唤起关注页面,也就是如何跳转到关注页面引导用户关注呢,主要分为以下几个步骤:

1、登录微信公众平台

2、点击微信号头像右击查看源代码

3、找到源代码中以下代码:

微信H5页面判断用户是否已关注公众号,以及唤起关注公众号页面_第4张图片

将uin_base64这个参数值带入以下链接:

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=uin_base64&scene=110#wechat_redirect

即可唤起关注公众号页面

微信H5页面判断用户是否已关注公众号,以及唤起关注公众号页面_第5张图片

你可能感兴趣的:(微信H5)