企业微信应用实战踩坑之路

背景

企业微信这两年在线下场景呈现爆炸性增长趋势，相比个人微信而言，企业微信有很多个人微信无法比拟的优势，比如品牌标识的加强，外部客户的管理，丰富的运营手段等等，说白了企业微信就是面向企业使用的，个人微信是面向个人使用的，定位的不同也决定了企业微信更加适合在运营、营销、推广方面来使用。经过 2021.3 以来的 2 个大版本的产品迭代，目前学而思一对一企业微信已经在用户画像、标签体系建设、裂变活动、渠道活码、群发助手、多主体支持等方面有了生产环境的实践经验。这篇文章分享一下学而思一对一在开发企业微信应用过程中，遇到的坑，以及如何解决的，希望对其他团队和伙伴有一些帮助。

1. 微信h5页，页面返回授权导致循环跳转问题

在项目中有这样的需求，在home页需要调用微信非静默授权，授权成功后跳转到活动页，然后渲染活动页的数据。 在home页调用获取微信授权的全部地址，类似

https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agentid=AGENTID&state=STATE#wechat_redirect

获取链接成功后通过 window.location.replace(url)跳转至授权页，用户允许授权后，微信处理页面跳转至链接中的 REDIRECT_URI 地址,这个地址就是活动页。理想情况下，目前window.history中只有一个活动页，当页面返回时，页面栈为空，窗口直接关闭。但事实是当用户返回时，会再次返回到home页中， 而home页继续执行跳转授权逻辑，授权成功跳转到活动页，导致用户无法退出活动页，陷入死循环。

经过测试发现，在活动页时window.history中存在带code参数的活动页，home页, 如图：

在项目中我们期望的效果是当从活动页返回时，直接退出微信窗口。首先解决的思路是当在活动页监听页面返回事件，在返回的回调事件中直接关闭微信窗口。这里就是监听 window 的 popstate 事件，popstate 事件在用户点击回退按钮时，会触发事件，需要注意的是，被激活的历史记录页面必须是通过 window.history.pushState 的方式进入页面栈。代码实现：

created() { window.history.pushState({}, null, location.href); window.addEventListener("popstate", () => { wx.closeWindow(); }, false); },

看起来逻辑并不复杂，在手机上测试后发现，在 iPhone 上是我们想要的效果，当页面返回时，直接退出了微信窗口，但是在部分 Android 手机上发现并没有执行，页面还是返回到了 Home 页，只有当用户在活动页操作后，比如点击，长按等动作后，再返回页面，才会触发监听事件。查阅相关文章后，给出的结论是

产生原因：微信的安全策略 / 微信浏览器内核
解决办法：必须用户点击当前界面（真人交互界面）

问题似乎到这里就卡住了，但值得高兴的是:

在 iPhone 和部分 Android 已经是我们想要的效果了，剩余的部分安卓手机，只能从其他方面来做兼容。

这里先说一下部分文章的解决思路。