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

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

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

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

他们的图是这样的:

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

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

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

你可能感兴趣的:(微信小程序Canvas文本加H5标签 示例之 翔球王足球答题--绿荫故事)