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圖片。