喂，快给我打一个小程序预览码

需求

开发小程序的朋友们随时都会听到一句话：“喂，快给我打一个xxx环境的预览码”，无论你正在干什么，都得赶紧地回一句：“稍等，这就给你打码……”

终于有一天，你正在专心致志做一些不可描述的事情时，“喂，快给我打一个xxx环境的预览码”，这时你内心怒吼了一句：“老子不给你打码！你自己打去！”

于是就有了这个需求，要搞个东西让爸爸们自主打码，嗯，应该就是只有一个按钮，点一下就可以出现预览二维码的东西，意淫了一下应该是这样的：

没错！就这样干！

规划一下

干大事就要从胡思乱想开始，现在来想想要搞成这个功能，需要做点什么准备工作吧。

找微信开发者工具的接口

最重要的事情莫过于看看微信开发者工具有没有给我们提供这样的接口让我们去操作，经过一番查阅文档我们会发现，果然有！

会发现，文档给我们提供了两种方式的接口，命令行调用以及HTTP调用。有了接口，一切都好办了，无非就是调一下接口，拿到二维码，贴到页面上去而已嘛，很简单。

梳理开发流程

我们就把这个简单的事情，用流程图说明一下：

https://www.processon.com/view/link/5b1de951e4b06350d45ce355

所需技术

工欲善其事，必先利其器，我们要搞这个东西，还是先要把用到的技术整理一下。

好像没别的东西了，用到了再说吧。

从后端开始

为了省事，直接把前后端的东西放在一起。项目目录：

可以看到server这个目录下放的都是后端的东西。

server/index.js

先看看入口文件index.js，从这里我们可以知道后端要做两件事情，第一要能访问到前端build出来的静态资源，第二要能与前端通过HTTP接口进行交互。见代码：

静态资源方面的话使用koa-static即可，重点是怎样给前端提供接口，这就要看路由了。

server/router/index.js

这里可以清晰看到，后端提供了四个接口，但具体每个接口的业务逻辑则封装在controller里的wx.js，如果以后还有别的业务逻辑，就在controller加相应的模块即可。

server/controller/wx.js

util/wxToolApi.js

这里有一点需要注意，为什么只有open接口需要用命令行调用方式？那是因为HTTP调用方式必须加端口，比如open接口：

如果你根本都没有打开微信开发者工具，在以下地方就会找不到端口：

所以作为一个全自动化打码工具，怎么可能还要自己去手动打开微信开发者工具呢！

前端

后端的东西基本就那么多，终于到前端了，前端十分简单，就不多说了：

这里有一个坑就是，login返回的base64是带了 前缀的，所以可以直接放到img的src里，但是获取预览码的preview返回的却没有这个前缀！所以需要自己加上去，就是那个

最后

其实到这里已经基本实现了整个打码功能，但如果真的要可以用还有很多事情没做。

End~

欢迎关注 SegmentFault 微信公众号 :)