中秋活动开发总结

这几天中秋节，配合运营部门开发了个中秋活动，本文总结一下过程中的一些体会
<!--more-->

微信订阅号和服务号混用的方案

我们的微信主账号是个订阅号，所以没有OAuth的能力，也就是说从网页上无法获得当前访问者的微信身份。而稍微完善一点的流程，都要求有这个能力。比如识别此人是否访问过此页面，显示访问者的微信昵称和头像等

所以我们就想了一个巧妙的办法，又认证了一个微信服务号，然后把订阅号和服务号关联起来，于是就可以通过union_id来标识同一用户了

然后在订阅号里，引导用户访问服务号OAuth的链接，比如

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类似：

/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秒

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>