一图总览
大家可以先看看下面的流程图,来了解笔者想实现的功能,简单来说就是两个不同主体间的小程序与公众号该如何产生关联。
注:为什么这里要强调不同主体呢,因为同主体的小程序与公众号是可以通过unionId来进行关联绑定。
实现方案
小程序web-view组件
Page({data: {// 公众号H5页面webviewUrl: '../../companyA/index.html',},onLoad() {wx.showLoading({title: '加载中'});},});
H5中进行公众号静默授权
H5 - LoginPage
利用web-view组件的bindmessage属性接收H5传输的数据
{webviewUrl}}"bindmessage="handleMessage">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好,除非这个授权页面是在业务中途打开的。
最后
对于从来没有接触过网络安全的同学,我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线,大家跟着这个大的方向学习准没问题。
同时每个成长路线对应的板块都有配套的视频提供:
当然除了有配套的视频,同时也为大家整理了各种文档和书籍资料&工具,并且已经帮大家分好类了。
因篇幅有限,仅展示部分资料,有需要的小伙伴,可以【点下方卡片】免费领取:
来源地址:https://blog.csdn.net/Android062005/article/details/128416855