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

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

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

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

他们的图是这样的:

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 足三里是艾灸保健中首选的养生大穴,在治疗各类疾病中不是主穴就是配穴,常常少不了足三里。但谈养生者,多是五七六七之后...
    和丰糖主阅读 2,088评论 0 0
  • 不知道我们最后会不会一起吹晚风,天冷的时候手会不会被你温暖包裹。但是我想记录,记录一些也许会成为开端的故事。从大鹏...
    厨白阅读 159评论 0 1