【小程序】微信小程序如何获取微信公众号openid?

一图总览

大家可以先看看下面的流程图,来了解笔者想实现的功能,简单来说就是两个不同主体间的小程序与公众号该如何产生关联。

注:为什么这里要强调不同主体呢,因为同主体的小程序与公众号是可以通过unionId来进行关联绑定。

实现方案

小程序web-view组件

web-view组件官方文档

<web-view src="{{webviewUrl}}" />
Page({data: {// 公众号H5页面webviewUrl: '../../companyA/index.html',},onLoad() {wx.showLoading({title: '加载中'});},
}); 

H5中进行公众号静默授权

公众号网页授权官方文档

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>H5 - LoginPage</title><script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body><script> // 公众号AppIdconst appid = '';// 处理链接参数示例const queryToObject = (str) => {if (<img src="https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}&state=AUTH#wechat_redirect`;window.location.replace(wxAuthUrl);}doLogin(); </script" style="margin: auto" />
</body>
</html> 

利用web-view组件的bindmessage属性接收H5传输的数据

web-view组件官方文档

<web-viewsrc="{{webviewUrl}}"bindmessage="handleMessage"
>
</web-view>

Page({data: {// 公众号H5页面webviewUrl: '../../companyA/index.html',},onLoad() {wx.showLoading({title: '加载中'});},handleMessage(e) {if (e.detail.data) {e.detail.data.forEach(d => {const { action, data, from } = dif (action === 'postData') {// 这里处理方式有很多很多种,大家可以视业务情况而定}})}}
}); 

小程序和内嵌的H5是无法自由通信的,一定需要通过H5的postMessage来进行数据传递,postMessage具体的使用限制在上面H5部分有详细介绍,这里就不赘述了。

在小程序侧则是通过bindmessage来接收H5抛出的信息,双方的交互过程有很多种处理方式,大家可以视业务情况自行处理,笔者这里简单列几个场景:

  • 在H5侧完成openId上报&绑定(需要在加载web-view前获取好小程序openId)
  • 在小程序侧完成openId上报&绑定
  • 在小程序侧接收H5信息并缓存,供其他页面使用

备忘录

web-view组件的使用限制

① 个人主体小程序无法使用该组件

② 该组件默认全屏覆盖(不支持cover组件覆盖、也不用想着限制其宽高),且不支持navigationStyle: custom配置

公众号运营者权限

如果需要在开发者工具进行调试静默授权,则需要在在相应的公众号后台配置运营者权限,否则将无法正常加载页面。

但是,在真机中预览开发版是可以完成静默授权的,所以是否需要配置运营者权限也是可选项,大家可以视申请配置的复杂程度而定。

明确体验缺陷

在开发之前一定要与产品侧或者客户明确该方案的体验缺陷。用户在这种方案下的等待时长肯定是偏长于页面加载平均值的,至少需要过两次空白页才能真正的重定向到目标页面。

redirectTo > navigateBack

另外再记录一个小细节,大多数情况下,redirectTo的表现都会比navigateBack好,除非这个授权页面是在业务中途打开的。

最后

对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。

同时每个成长路线对应的板块都有配套的视频提供:


当然除了有配套的视频,同时也为大家整理了各种文档和书籍资料&工具,并且已经帮大家分好类了。

因篇幅有限,仅展示部分资料,有需要的小伙伴,可以【点下方卡片】免费领取:

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取微信小程序公众号关注状态的代码需要使用微信官方提供的API接口,具体的步骤如下: 1. 首先需要获取到用户的openid,可以通过调用`wx.login()`方法获取到用户的code,然后将code发送到自己的服务器,服务器使用该code调用微信官方提供的API接口`https://api.weixin.qq.com/sns/jscode2session`获取openid。 2. 获取openid之后,就可以使用微信官方提供的API接口`https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN`获取用户的信息,其中access_token是调用微信官方提供的API接口时需要使用的令牌,OPENID是用户的openid,lang是返回用户信息的语言版本。 3. 在获取到用户信息之后,就可以判断用户是否关注了小程序公众号。如果用户已经关注了小程序公众号,那么用户信息中的subscribe字段的值为1,否则为0。 以下是一个简单的获取微信小程序公众号关注状态的代码示例: ```javascript // 获取用户的openid wx.login({ success: function (res) { if (res.code) { // 发送code到服务器获取openid wx.request({ url: 'https://server.com/api/getOpenid', data: { code: res.code }, success: function (res) { var openid = res.data.openid; // 获取用户信息 wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/user/info', data: { access_token: 'ACCESS_TOKEN', openid: openid, lang: 'zh_CN' }, success: function (res) { if (res.data.subscribe == 1) { console.log('用户已经关注了小程序公众号'); } else { console.log('用户没有关注小程序公众号'); } } }); } }); } else { console.log('获取用户登录态失败!' + res.errMsg); } } }); ``` 需要注意的是,ACCESS_TOKEN是调用微信官方提供的API接口时需要使用的令牌,需要在调用API接口前先获取到。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值