微信助手 Chrome 插件开发手记

13 Jan 2016


现在项目已经开源,大家一起来完善这个项目吧。

https://github.com/liaohuqiu/wechat-helper


项目背景

上个礼拜看到 @0x5e 同学的 wechat-deleted-friends 项目,提出了一种新的检查自己是否被联系人删除的新方式。真是一个伟大的创新。

很多人会群发消息,验证自己是否已经被他人删除了。这种方式是非常不好的方式,对联系人是一种骚扰。而目前这个新的方式,优雅了很多。

原理很简单,利用微信的 Web API 将联系人加入到群组中,如果不是好友关系,无法加入。

不过遗憾的是,但是原项目是一段 Python 代码,使用起来需要计算机功底,我想让普通用户也能享受这样一种便利。

想法

当时有两个想法:

  1. 写 Windows 版本,这个用户基数最大,直接 Windows 窗体,安装使用都很方便,.net 系列的技术我也很熟悉。

  2. 写 Chrome 插件,在网页版中直接发送请求,还省去了登录验证的麻烦。

由于 .net 开发之前做得很长时间了,并且当时是当作一个商业项目做的,实现目前这个项目完全没有挑战,所以我选择了较为有挑战的 Chrome 插件。

虽然我之前写过一个小插件:List Sorter,不过那个是非常实验性的一个项目,几乎没什么受众。

这次,我想做的是一个可以给大众用的产品。

时间

除去工作之外,现在我手头有好几个事情在同时进行。

时间是从上周三开始,本周一开始内部测试,周三正式对外发布。都是业余时间。

但是我原计划是,周日晚上就发布的,结果项目途中遇到了很多问题,最后是一周时间。

做了些什么

在这段时间内,完成了:

  1. 分析了项目的定位和独有优势

    1. Chrome 插件,图形化界面,易于使用
    2. 对于大量好友,保存上次状态,下次继续可以跳过
    3. 可检查黑名单
    4. 项目开源后可作为 Chrome 开发的一个参考
  2. 项目的 UI 方面的设计,包括

    1. 导航栏中显示一个按钮

      增加网页版微信入口,方便用户使用。

    2. 左侧菜单的设计

      包括菜单的显示的内容和交互方式,如何尽量不给用户带去骚扰。

    3. 以及一个丑陋的图标

    4. 所有的交互文案

  3. 快速地完成了开发,技术点包括

    1. Webpack 打包方案

      Chrome 插件有三个入口,需要高定制化的打包方案。

    2. Iconfont 技术

    3. 使用事件,分离出了 UI 和 具体业务逻辑。

    4. 全套的打包脚本

    5. 日志分级

    6. Chrome 插件下 基于 Webpack 的模板使用

    7. Chrome 插件下的 Google Analytics

    8. Chrome 插件的 i18n 方案

  4. 完成了数据统计。

    包括所有页面的访问,按钮点击。用户改进产品。

    一个完善的产品一定要有数据统计。这为产品的改进,功能的好坏提供直接参考。

  5. 测试和发布

    经过多轮测试和改进,最终发布到 Chrome 商店。 https://chrome.google.com/webstore/detail/bdfbkchemknlpmmopkncahjdmocnambd/

  6. 经完成了开源

    https://github.com/liaohuqiu/wechat-helper

遇到的问题

  1. UI 和交互设计,进度慢,反复改进多次。术业有专攻,这部分我确实需要多加锻炼。

  2. 白天要工作。到了晚上(东八区)上午,微信的网络延迟非常高,效率很低。

  3. 缺少测试账号,接口访问受限之后,只能等着,去做其他事情先了。

  4. 操作过于频繁,接口访问受限,现在折衷的办法是记录之前检查过的好友,下次继续的时候跳过。

    只要是 Web API 目前都有可能遇到这个问题。暂时还没想到解法。

心得体会

  • 事情虽小,但是标准不会降低。

    这次开发时间比较短,但是类似:

    Debug / Release 包的区分,日志分级,数据统计,多语言支持等等

    一般情况下,只有较大规模的产品才会处理这些事情,作为一个小插件,我把这些全部做了一遍。

    项目发布第一天,Google Analytics 显示,有 1000 多的用户。看到同时在线的人数,最高是 80 。

  • 开源

    目前,这个项目看起来,还不错。现在将代码开源,希望对大家有所帮助。

    https://github.com/liaohuqiu/wechat-helper

    Write the code, change the world. Happy coding!


欢迎关注我的微信公众号

欢迎关注我的 新浪微博,有问题随时交流。

欢迎关注我的 GitHub,了解我最新关注的项目。

comments powered by Disqus