中秋活动开发总结
这几天中秋节,配合运营部门开发了个中秋活动,本文总结一下过程中的一些体会
微信订阅号和服务号混用的方案
我们的微信主账号是个订阅号,所以没有OAuth的能力,也就是说从网页上无法获得当前访问者的微信身份。而稍微完善一点的流程,都要求有这个能力。比如识别此人是否访问过此页面,显示访问者的微信昵称和头像等
所以我们就想了一个巧妙的办法,又认证了一个微信服务号,然后把订阅号和服务号关联起来,于是就可以通过union_id来标识同一用户了
然后在订阅号里,引导用户访问服务号OAuth的链接,比如
1 | https://open.weixin.qq.com/connect/oauth2/authorize?appid=服务号的appid&redirect_uri=活动链接&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect |
这样就可以通过服务号的OAuth服务得到当前访问用户的union_id。接下来活动本身,是引导用户关注订阅号。当订阅号收到微信推送的关注事件之后,再通过微信接口把union_id查出来,就对上了
我们这个活动页面,还有一个特殊的地方。页面是属于某个用户的,此页面自己打开,和别人打开看到的东西是不同的。比如我的拉票页面,自己打开是看到已经投了多少票,别人打开是给我投票。我们设计的URL类似:
1 | /zhongqiu/route/:union_id |
:union_id表示此页面属于某个用户,这页是通过OAuth跳转来的,因此就带有当前访问者的union_id,与URL中的union_id对比,就可以识别出当前访问者的身份了
利用CDN加速网页访问
虽然活动是动静分离的,但是一开始的时候,我担心让静态文件走CDN,会导致跨域问题
比如把静态资源部署在OSS上,通过huodong.xxx.com来访问。然后在网页上通过ajax方式调用api.xxx.com上的接口。一般情况下都是没问题的,但是某些型号的手机会跨域失败。所以就全部署在同一个域名上,没有通过CDN访问
活动上线之后,不少用户反馈页面打开太慢。其实我们的前端页面已经是优化过的了,没有更直接的优化手段了,所以不上CDN也不行了
于是把js,css放到了OSS上,用s.xxx.com访问,通过CDN加速。html和服务接口还是放在服务器上,保持同一个域名,不走CDN
这样调整之后,静态资源的加载快了,但是html还是太慢。最后我同事发现,可以在CDN上配置路径过滤,设置不同的缓存时间。正巧服务接口的路径都是带/svc前缀的,于是把带这个前缀的路径都设置成不缓存,直接回源。最后访问速度明显提升
修复图片过大引起的闪退问题
活动的一个页面是照片墙,用户自己上传图片,在这页以瀑布流展示。没想到上线以后用户传的图片太多,使微信闪退了
凭经验判断应该是由于加载了太多图片,导致内存占用过高,iOS杀死了微信进程
这个问题似乎没有太好的优化办法,于是我们在服务端用sharp将用户上传的图片压缩,控制每张图片的大小
最后确实改善了闪退的现象,不过我相信这不是彻底的解决办法,如果图片数量进一步增加,那最终还是会闪退的。彻底的解决办法是需要优化这个html,将移出屏幕的图片释放。但是这个方案比较复杂,而且改动太大了,这次没有实施
加数据库索引,改善接口性能
发现有一个接口平均响应时间长达4秒钟。检查了一下,这个接口的代码异常简单,就是单纯的SQL过慢
涉及2张表的join,对join的字段加了索引,马上有明显改观,接口平均响应时间减少到0.1秒