微信小程序:用Node.js 快速搭建服务器

Node.js 最大的好处是前后端都用 JavaScript,个人项目开发起来极快。自己入坑一年多,很懒散不想再写基础类教程,但前两天和三瓜吃饭听到他想架个服务器,就又跑回来更新了。

客户端

在之前的文章中,已经给出了生成图片的代码。其实微信表情和图片类似,只不过格式换成了 GIF 动图。

客户端的逻辑就是如此的简单,生成表情按钮的事件监控代码如下 :

接下来的任务是在本地撸一个服务器。

服务器

一个网站服务器的功能就是接收了用户的请求后,根据请求类型和 url 返回对应的数据。而这里要实现的服务器只需要实现一个功能 : 接收了客户端上传的 png 图片后,返回一个相对应的 gif 格式图片。

因为是快速搭建服务器,所以就不重造轮子了( 我也不知道怎么造 ),网上稍加搜索可以找到 npm 的第三方库,用 png-file-stream 读取用户上传的图片,之后用 gifencoder 转换成 gif 格式。

需要注意的一点是如何将 gif 图片传回客户端。一般来说,后端生成图片后,会传到其它云存储服务器内( 如 aws s3 bucket ),再把图片的 url 返回给客户端。但是小程序生成表情并不需要保存用户上传的图片,所以这里采用的方法是将图片加密成 base64 的字符串,之后在客户端再将字符串解密并呈现给用户即可( HTML image tag 可以直接显示 base64 的图片 )。

服务器的主要逻辑和实现方式都讲完了,接下来看代码。

在此之前请自行上网搜索如何安装 Node.js,教程一大堆,不赘述。以下所有内容建立在电脑已经安装了 Node.js 的基础上。

标题起的是用 Node.js 建站,其实用的是 Node.js 的一个应用框架,叫做 Express。顾名思义,用了这个框架后,从零开始建站的速度非常快。

代码的结构如下 :

先建 package.json 文件,之后安装的依赖库都会存在这里。

用 node.js 开发就必不可免的要安装一连串的依赖,在命令行输入以下指令安装五个依赖包 :

安装好之后建 app.js 作为入口文件 :

可以看到,入口文件里面需要路由的帮助才能知道如何处理客户端的请求。所以新建一个名为 routes 的文件夹,在里面建 api.js :

multer 是 Express 中文件上传的中间件,帮助服务器拿到客户端上传的图片,具体实现感兴趣的同学可以看源码。

这几行代码的逻辑还是很清晰的。假设网址是demo.com,路由写完后,将支持以下两个 uri :

路径为demo.com 的 GET 请求,返回结果是 json 格式的 status: ‘ok’。这个请求纯粹是用来测试网站搭建是否成功的,建网站可以将这里的返回值换成网站入口的 HTML( 具体实现不在本文的讨论范围内,详情可参考 Express 官方文档 )。

路径为 demo.com/convertToGif 的 POST 请求。如果在 POST 请求中上传了一个名为 canvasImage 的文件,上述这串代码会调用 services 文件夹下 ImageConverter 文件里的 pngToGif 方法。

接下来新建一个 services 文件夹,并在里面创建名为 ImageConverter.js 的文件 :

代码实现虽然不是最优( 这里是将 gif 文件存下来之后,再次打开才转换成 base64 的字符串,应该有不存直接转的办法吧 ... ),但逻辑还是清晰易懂的 :

至此,服务器的代码都写完了,可以在服务器代码文件夹的根目录下用 `npm start` 启动服务器。

这时候可以在网页中通过 localhost:3000 访问服务器了!

服务器搭建好了我们再回头看一眼之前的小程序。

只要将代码中 url 的服务器接口改成 http://localhost:3000/convertToGif 即可运行并生成微信文字表情。需要注意的是,此时的代码仅供单机调试,若想让别人用上这个服务,就需要将网站上线( 如果你不准备自己买一台电脑永久开着的话 ),有人看的话下周会专门写一篇网站部署的文章。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180113G0AKHY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券