开发微信小程序

放假在家蜗居了一周后，闲得想要写点代码，就趁着还在墙内，赶快体验了把微信小程序的开发流程。

抛去应用场景和分发渠道，这篇文章主要从开发者的角度说一下体验两天后的感触，并简单描述下一个下午完成的 beta 版项目。

起因是朋友圈的两个小可爱在探讨如何制作文字表情。然后发现是在记事本输入文字后手动截图的 … 而且只有华为的笔记本背景是白色。

找到需求后就从没日没夜的知乎中抬起头来，抽了一个下午体验了把小程序开发。

开发

对小程序稍微有点了解的人可能都知道，小程序就是一个特别版的 HTML5，这几年做过前端开发的人会对小程序的前端架构产生一种亲切感 － 还是熟悉的 html + css + js 组合，只不过微信把 html 换成了 wxml，css 换成了 wxss。

既然用了自己的 wxml，那么很多前端 framework 有的功能( 例如数据的双向绑定 )小程序都支持就有点理所当然的意味。除此之外，开发过程中我觉得最方便的地方是不需要麻烦地设置用户登陆、支付等功能，官方的 API 能够极其方便地调用这些接口。

值得一提的是，官方的文档写得不错，跟着文档很容易就能设置，并运行一个演示项目。

有几点入坑前的注意事项 :

官方的开发工具很好用，除了查看 wxml 元素时有点不方便外，代码编译、手机模拟器、二维码预览等功能都很顺畅。直接下载，不要犹豫。

wxml 的 view tag 和 html 里的 div tag 相对应，排版时可以在 wxss 里把 view 的 display 全部设置为 flex，根据需求调整 flex-direction 和间距

小程序的渲染逻辑和 Vue / React 相似，比如给数据赋值时，要用this.setData({…})才会触发重新渲染。

wxml 并不支持所有 html5 里的功能，比如 wxml 里的 canvas 就没有 getTextWidths 方法

小程序

截图左边是制作好的 MVP ( Minimum Viable Product ) 效果图，简单粗暴地将 UI 分成三块 :

最上面的 canvas 用于显示文字和之后生成图片

中间的 textarea 让用户输入文字

一键生成的按钮

代码如下 :

很简单的 UI 分类，但在刚开发的时候走入了两个小坑 :

没有采用 canvas，而是用一系列的 view tag 在 wx-for 的帮助下显示文字。只有当用户按「 生成图片」按钮后，才创建 canvas 并截图。好处是渲染速度可能会快一些，但后来发现直接显示 canvas 能够使代码更简洁，并且程序体验也没有变差。

一开始用的是 input tag 来记录用户的输入文字，坏处是无法换行，而已经有一个用户体验相当好的单行文字图片小程序。于是将 input 改成了 textarea，不过 UI 还有待改进。

UI 比较简陋，就不提 wxss 了。

因为功能非常简单，index.js 里连数据都无须绑定，只有两个事件监控的 js 代码。

第一个方法是在用户更改 textarea 时更新 canvas 里的图案。代码逻辑可能会有更好的实现方式，这里我的做法是每当 textarea 数值变化时，重新渲染 canvas 图层。

第二个方法是生成图片。出乎意料的简单，直接调用小程序的接口就可以将 canvas 保存。

至此，就可以提交代码上线测试版本了( 注 : 以个人名义注册的开发者最多只能绑定 15 个体验成员 )。

代码里有很多的 magic number，不过之后可以设置一系列高级设定将这些数字替换掉( 如 : 字体大小，颜色，间距 … )。对于 MVP 来说核心功能都做好了，无需过多考虑，后面就是验证是否有需求了。

细心的小伙伴一定发现了，为什么核心功能是生成文字图片，给小程序的起名却是生成文字表情呢？原因有两点 :

已经有叫「文字图片」的小程序了，申请不了这个名字。

既然已经有生成文字图片的小程序，再做一个相似的工具很大概率无法通过微信的审核。这串代码除了造轮子外，并不能得到从开发到上线的小程序闭环体验。所以之后还会添加将图片转成微信表情的功能。