学而思一对一企业微信应用实战踩坑之路

好未来技术

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

微信h5页面返回授权导致循环跳转

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

代码

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

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

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

代码

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

产生原因：微信的安全策略 / 微信浏览器内核

解决办法：必须用户点击当前界面（真人交互界面）

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

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

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

引导用户点击页面。在进入页面时弹出弹框，诱导用户点击弹框。这种方法的缺点时如果用户在进入页面后仍不点弹框直接退出，还是会导致页面无法退出，并且并不是所有的页面都适合做弹框。所以该方法并不适合我们的项目。
引入其他第三方库，监听手机原生回退事件，比如引入jQuery mobile，监听手机返回的手势，再执行回调事件。这种方法增加h5页面的大小，不利于页面加载，而且无法保证能监听到所有手机，经测试，在部分手机通过物理按键返回是监听不到的。

如果不能阻止页面返回，那能不能在页面再次返回到home页时，比较两次进入home页的不同，对应关闭窗口？

通过对比两次进入home页发现，当用户授权成功后，微信授权跳转到活动页时，会在活动页上带着code参数，拿到授权成功后的code，我们存储在sessionStorage中，当进入home页时，我们先判断是否存在code，如果存在code，就直接退出页面。代码实现：

代码

注意事项⚠️：

需要注意的是这里调用微信关闭窗口的方法时，需要确保WeixinJSBridge已经ready完成，否则在会出现WeixinJSBridge没有加载完成时，已经开始调用closeWindow方法，这时候该方法是不生效的。

在手机上重新测试，发现所有手机已呈现我们想要的效果。回顾这个问题，在未处理页面返回之前的逻辑：

监听返回，并兼容部分安卓手机后的逻辑：

微信h5前端生成海报

在裂变活动页中，需要请求后台接口获取到活动信息，拿到活动海报数据，包括活动背景图，用户昵称，用户头像，企业微信二维码，将这些图片和文字重新生成海报图，插入页面中，用户可通过长按保存海报或者将海报分享给朋友。项目中通过使用 html2canvas 将 DOM 转换成图片，

注意事项⚠️：

这里使用的是1.0.0-rc.4版本，部分高版本会导致ios手机生成图片空白的问题

确定了实现方案后，接下来就是绘制 DOM，查看html2canvas文档，将DOM转化成图片。

2.1 跨域问题

通过canvas.toDataURL()转化成图片，会涉及到跨域问题，我们期望图片跟当前域名是同源，但我们需要获取用户的微信头像和企业微信活码，所以首先我们需要解决跨域图片的加载问题。

1.html2canvas 配置跨域。通过配置useCORS: true(跨域资源共享)：

通过cors请求图片时一定会带上值为当前域名的Origin请求头，由于使用html2canvas需要先构造DOM，当DOM中有img标签时，会解析img标签的src属性，然后创建Image对象。请求图片的时候，会从浏览器的缓存中读取图片，缓存中的图片没有Access-Control-Allow-Origin响应头，所以如果不处理img，会导致从图片有缓存时生成图片是空白，所以需要给所有的img标签添加crossOrigin="anonymous"属性，即以跨域的方式重新读取图片数据。所以使用CORS我们需要做的是：