一图总览

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

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

实现方案

小程序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-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') {// 这里处理方式有很多很多种，大家可以视业务情况而定}})}}
}); 

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

备忘录

web-view组件的使用限制

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

navigationStyle: custom

公众号运营者权限

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

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

明确体验缺陷

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

redirectTo > navigateBack

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

最后

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

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


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

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