关于微信小程序生成海报一个简单的办法
废话不多说，直接入题，先上GITHUB地址，这个组件很好用，有图形生成工具，你不用再自己写代码一个个元素对齐了，是不是很爽。
GITHUB：https://github.com/Kujiale-Mobile/Painter
生成painter代码：
React App 这个很好用吧，自己把设计变成海报，然后复制出代码
充分利用painter的优势。小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter
下载源代码
这个也简单，先下载源代码，然后小程序根目录里建一个components文件夹，把程序代码贴进去，当然你可以用GIT命令，省去手动下载的麻烦。
git clone https://github.com/Kujiale-Mobile/Painter.git
新建一个生成海报的小程序页面，引入这个组件
"usingComponents":{
"painter":"/components/painter/painter"
}生成海报代码：
数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。
bind:imgOK="onImgOK"
bind:imgErr="onImgErr"
onImgOK(e) {
其中 e.detail.path 为生成的图片路径
},第一步生成的海报代码可以放进页面，然后修改图片地址为动态的即可。
palette() {
return (
{
"width": "654px",
"height": "1000px",
"background": "#FEF8F3",
"views": [
{
"type": "qrcode",
"content": "哈哈哈",
"css": {
"color": "#000000",
"background": "#ffffff",
"width": "200px",
"height": "200px",
"top": "779px",
"left": "29px",
"rotate": "0",
"borderRadius": "10px"
}
},
{
"type": "text",
"text": "扫码关注",
"css": {
"color": "#ff0000",
"background": "rgba(0,0,0,0)",
"width": "200px",
"height": "43.89999999999999px",
"top": "2px",
"left": "1113px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "1px",
"borderColor": "#000000",
"shadow": "10 10 5 #888888",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "扫码关注",
"css": {
"color": "#ff0000",
"background": "rgba(0,0,0,0)",
"width": "200px",
"height": "43.89999999999999px",
"top": "2px",
"left": "1113px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "1px",
"borderColor": "#000000",
"shadow": "10 10 5 #888888",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "扫码关注",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "30px",
"height": "175.10999999999996px",
"top": "787.94px",
"left": "254px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "normal",
"maxLines": "5",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "1. 忌食辛辣刺激食物\n2. 忌运动量过大\n3. 戒烟戒酒，忌暴饮暴食",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "250px",
"height": "93.88px",
"top": "611px",
"left": "40px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "20px",
"fontWeight": "normal",
"maxLines": "6",
"lineHeight": "31.080000000000002px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "养生小贴士",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "200px",
"height": "42.89999999999999px",
"top": "537px",
"left": "42px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#C87756",
"shadow": "",
"padding": "0px",
"fontSize": "30px",
"fontWeight": "bold",
"maxLines": "2",
"lineHeight": "43.290000000000006px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "webfontzk",
"textAlign": "left"
}
},
{
"type": "text",
"text": "分",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "130px",
"height": "185.89999999999998px",
"top": "708px",
"left": "484px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "130px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "187.59000000000003px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "webfontzkxw",
"textAlign": "left"
}
},
{
"type": "text",
"text": "秋",
"css": {
"color": "#C87756",
"background": "rgba(0,0,0,0)",
"width": "130px",
"height": "185.89999999999998px",
"top": "580px",
"left": "463.5px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "130px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "187.59000000000003px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "webfontzkxw",
"textAlign": "left"
}
},
{
"type": "image",
"url": "https://static.fotor.com.cn/assets/res/pic/454d3884-b1d1-4059-a08b-18427f93c8eb.jpg?x-oss-process=image/resize,lfit,h_1200,w_1200/format,src",
"css": {
"width": "568.01px",
"height": "475.27px",
"top": "0px",
"left": "39.19px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": "请朋友们注意防寒保暖，小心着凉",
"css": {
"color": "#fff",
"background": "rgba(0,0,0,0)",
"width": "22px",
"height": "372.9000000000001px",
"top": "61px",
"left": "71px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "22px",
"fontWeight": "normal",
"maxLines": "22",
"lineHeight": "24.42px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
}
]
}
);
}
关于如何生成小程序码
请看小程序文档，写的很清楚了，先获取TOKEN然后调用接口即可生成，把图片保存服务器生成小程序码的URL
文档地址：获取不限制的小程序码 | 微信开放文档
给一个PHP的代码，仅供参考
保存海报分享
另外，生成的海报如果保存一键转发，小程序文档也有相应的接口，直接可以使用，不过请注意你开发工具的版本要高于2.16.0
地址也发下吧：wx.showShareImageMenu(Object object) | 微信开放文档
至此，完成了小程序生成海报分享功能。