打卡模板 1
id: h9zuu2zh
预览
JSON 样本
{
"backgroundColor": "#111",
"backgroundImage": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/laptop.jpg",
"user": {
"avatar": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/girl_2.jpg",
"nickname": "筱墨"
},
"tip": "刚刚完成了打卡",
"qrcode": "https://khb-sample.oss-cn-shanghai.aliyuncs.com/sample/sample_qr_0.png",
"records": [
{
"label": "累积打卡",
"number": 50,
"unit": "天"
},
{
"label": "学习时间",
"number": 60,
"unit": "分钟"
},
{
"label": "行动力超过",
"number": 70,
"unit": "% 的同学"
}
],
"brand": "快海报",
"slogan": "小程序分享海报生成服务",
"company": "快海报",
"companyColor": "#fff"
}
参数说明
JSON
参数 | 必需 | 说明 |
---|---|---|
backgroundColor | 否 | string,背景色 |
backgroundImage | 否 | string,背景图,可以传 url 或 base64 图片字符串 |
user | 否 | 用户对象,详情参见 user 部分 |
tip | 否 | string,提示语 |
qrcode | 否 | string,二维码图片,可以传 url 或 base64 图片字符串 |
records | 否 | record 对象的数组,详情参见 record 部分 |
brand | 否 | string,产品名 |
slogan | 否 | string,宣传语 |
company | 否 | string,最底部显示名称 |
companyColor | 否 | string,company 字段显示的颜色, |
user
参数 | 必需 | 说明 |
---|---|---|
avatar | 否 | string,用户头像,可以传 url 或 base64 图片字符串 |
nickname | 否 | string,用户名 |
record
参数 | 必需 | 说明 |
---|---|---|
label | 否 | string,标题 |
number | 否 | string,大字体主要内容 |
unit | 否 | string,内容后面的单位 |
base64 图片字符串
例如:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQAAAAB0CZXLAAABUElEQVR4Ae3ZMa6DMBAE0IkoUuYIPgpHI0fjKByBkgIxfxezlvOrVT6/m6mW0atQZGwHkQe5DsS42bDY0CKQBSM9mwPABlgGRi3APLAexcC79oc9kVF/CQQ4w4a/AgHgBFyGfwEC9ASgV4WMOgsEWgy8dnB+Hpi6b1YaCDBigDTAz2SBAMY19lHcUVPIGO4DApxt4PJkbA8sC6x+kVangcBZoWyxPsAGXJlM5oBApPAAMPBcaVF2/y0/SG55IDCSvA6k/mTVxAu8gTuBwDrQ87ll5fzyfcKTeSDAHeeW1dPO/t36kAcCsT4AbX2wPCpPA4EVV+o3KxKXAHcBAba8McTR1YcVmJgHAr+uoxEn1vhmpYFAf4viTxW0V50HAv3NnnMfPLW5Hwh056yyX/V3QADdv1GWw+s8EGjrAxmv2sEMYGIaCLRYH1vWyWTkNiDwAzxizYbj8refAAAAAElFTkSuQmCC
我们将通过这样的方式渲染:
<img src="data:image/png;base64,iVBORw0KGgoAAAA....">
颜色使用说明
以 CSS 方式渲染,例如:
#111
/#ffffff
/#1F1F1F
/rgb(197,93,161)
/black
均为可接受类型
背景色与背景图片
使用方式为二选一,使用背景色或背景图片,如果两个值同时存在,则取背景色优先。
records
record
元素渲染时,在水平方向上平均分布,建议不要超过 3 个元素,否则可能会因为宽度不够互相挤压,生成效果受影响
使用方法
将本模板所需数据的的 JSON 表示填充到 海报生成 API 的 data
字段中,最终的 post body 如下:
{
"template": "h9zuu2zh",
"data": {
your json here...
}
}