微信小程序Canvas文本加H5标签 示例之 翔球王足球答题--绿荫故事

最近各种排版的微信小程序从最开始的“2018我的毒故事”到“高考”小程序，把朋友圈火了一个遍。尽管现在微信没有开放从小程序转发朋友圈的接口，但是大家为了炫耀浮夸的“自我认知”，非常愿意进行复杂的操作完成分享流程。

无论是“毒故事”还是“高考”都是服务器或者是后端生成了图片之后，让小程序下载图片进行展示。这个好处就是完全不用考虑适配的问题，但是这完全抛弃了小程序的canvas画图api。而且机动性太差，每次添加一个素材都需要很大的维护成本。

在这里分析一个完全用微信自带的api完成的文本展示小程序：翔球王足球答题。这名字令人印象深刻啊。。。

他们的图是这样的：

这些图完全是根据图片的位置以及字体的大小高度来计算摆放的。

这个实现方式的思路倒是不复杂，只需要根据正则表达式去匹配对应的h5标签，对字体的宽和高进行计算即可实现。

有了这个小程序的示例，也给了开发者一些信心。原来微信的自带canvas并不是一无是处！