【小程序】微信小程序如何获取微信公众号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好，除非这个授权页面是在业务中途打开的。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取