小程序海报生成工具，视觉编辑直接生成代码供使用

开门见山

工具地址

由于它安装在github页面上，所以打开速度会较慢。请耐心等待或自行解决git网速问题

出身背景

在做小程序时，我们经常需要将小程序分享到朋友圈，但朋友圈不允许直接分享小程序。我们有其他解决方案吗？必须有一个答案，那就是canvas生成个性化海报，与朋友分享图片

分析

小程序中有很多图像生成要求，但使用过画布的人会发现一些不可预测的问题

直接在画布上绘制图形。对于普通开发人员来说，代码将非常混乱，难以维护。他们经常花很长时间来优化代码

不同的环境渲染问题，例如，当开发者工具看起来不错时，一旦它到达Android真机，就会出现诸如没有图像显示、位置不正确等问题

解决

我们可以开发一个插件库来生成海报吗？

首先，只需提供一个简单的参数配置文件

解决小程序Canvas遇到的一些大小漏洞

有严格的测试链接来解决各种环境和模型中遇到的问题，并提供稳定的在线版本

长期维护，指派专人更新更新功能

当然，上面的要求是可以的。我想尝试开发一个，但我在尝试了一些现成的工具后放弃了。毕竟，车轮需要不断维护和更新。此外，有这么多优秀的现成插件，我为什么要费心编写它们呢？最好贡献代码。下面是我收集的一些插件

小程序生成一个图片库，轻松绘制一张可以通过json发送到朋友圈的图片

小程序组件-小程序海报组件

微信小程序：一个json帮助你分享朋友圈的图片

我想做什么

说了这么多，我似乎和给大家提供插件无关……不可能离开

我想了很长一段时间，为了制作更酷的海报

虽然插件可用后可以通过提供配置代码来制作海报，但我发现仍然存在一些问题

制作海报的效率不够高。要微调元素的大小和位置，您需要不断修改和保存代码，等待片刻，然后检查效果。真的很烦人

一个小的位置调整可能需要无数的前后调整。这种最简单的机械化劳动在这辈子是不可能的

把完美的手稿拿给设计师看。位置不对，线条太粗，颜色太重。信不信由你，我会杀了你

对于一些漂亮而复杂的海报来说，实现这一点真的不现实

我需要做什么？此链接体验

单击左侧示例显示中的任何示例，然后导入代码以查看效果图。你应该能猜到我的想法

如何实现

一开始，我想使用简单的html和带有拖拽功能的css。经过一次简单的尝试，我放弃了，因为这个函数实在太复杂了。简单的工具不能工作

中间的计划被搁置了很长一段时间并被放弃了

在我找到这个图书馆之前，我的妻子很优秀，没有办法表达她的赞美。唯一的缺点是中文课程太少，所以我不得不学习英语和谷歌翻译

面料介绍，您可以轻松创建任何简单的形状、复杂的形状和图像；将它们添加到画布中，并以任何方式修改它们：位置、大小、角度、颜色、笔划、不透明度等

如何使用

目前，该工具分为四个部分

示例显示

它用来展示一些由用户设计的漂亮海报。单击相应的示例并将代码导入画布

画布区域

显示真实的海报效果。添加到画布中的元素可以直接用鼠标拖动、旋转和缩放

作业区

第一排有四个按钮

复制代码，将画布显示效果转换为小程序海报插件库所需的json配置代码。目前，我使用的是Painter库，默认情况下会转换为插件配置代码，代码可以直接复制到card.js

是否使用代码查看功能并不重要。您可以直观地看到生成的代码

导出json将画布转换为织物所需的json代码，以便保存自己设计的海报代码

导入json导入步骤3中导出的json代码，设计的海报样式将显示在画布上

第二排有五个按钮

有关详细信息，请参见以下内容