1. 先行准备
① 下载
在Github上下载代码，代码包里打开component目录，复制下面的整个painter文件夹，到小程序项目的component目录下。
由于painter本身比较大，如果放在主包里可能在编译预览及上传时会提示 超出文件大小限制 的错误，所以建议将painter放在子包里面。（使用分包）
② 引用组件
在需要绘制海报的页面.json中添加：
{ "usingComponents":
{
"painter":"../components/painter/painter
}
}
③ 使用组件
在.wxml添加：
<painter palette="{{template}}"
bind:imgOK="onImgOK"
bind:imgErr="onImgErr"
/>
获得界面样式的json数据
可以打开 Painter海报生成Json工具 网站，例如先导入左边的模板，然后点击导出Json，再点击复制代码，即可得到生成的Json样式数据。
新建一个放海报样式的文件夹
如下是我的练手项目的目录结构，Painter和海报数据都放在分包里。
新建一个js文件，例如card.js，将第二个步骤的json数据粘贴进去。
如果数据是动态的，或者图片是本地图片，那么就需要再修改json数据中的值。
在最前面的palette()方法中添加参数 params，它是object
export default class LastMayday { palette(params) {
在需要动态赋值的地方修改为：${params.company}
"text": "公司名："+`${params.company}`,
本地图片路径：一定不能用../形式，不然会出现file not found错误
"type": "image",
"url": "/wxsocial/palette/images/tp1.jpg",
1
cloud://开头的云存储FileID也可以存入，跟上面一样。但是要显示cloud://图片还需要修改Painter的源码，这个在后面介绍。
小程序码：存入图片地址，type用image:
"type": "image",
"url": `${qrcodePath}`,
1
qrcodePath是小程序码接口返回的路径，我这里是 http://usr/qrcode.png
准备工作做完了，接下来进入页面的js。
4 .js:
1> 引入 card.js
import Card from '../../palette/card';
2> 实例化并赋值
this.setData({ template: new Card().palette(params) });
其中params就是要传入card.js的数据:
let params = { "company": this.data.company, "contact": this.data.contact, "image1": this.data.image1, "image2": this.data.image2 }
template赋值之后，海报会自动开始绘制，绘制完毕后会在 imgOK() 得到回调结果，如果绘制失败则是在 imgErr() 方法中。 绘制完成后海报则会显示。
如果不希望一直绘制，下载图片，在 imgOK() 里可以保存图片的路径，下一次直接显示图片。
5. 对于cloud://图片的显示
如果用到云开发，有时候我们会将图片保存在云存储里，而微信返回的是一个FileID,而不是一个具体的下载地址，那么这种情况下要怎么将cloud://地址传入Painter呢？
Painter默认是下载http图片的，但是在查看Painter.js源码时发现，它的下载工具是wx.downloadFile，而在判断是下载图片还是打开本地图片时，有一个正则表达判断是否为http(s)开头，因此只要拦截这个判断，并添加 cloud:// 开头的判断，如果是云ID图片，则下载云储存图片，否则走正常的下载http图片。