微信小程序"海报"需求
发表时间：2021-4-13
发布人：葵宇科技
浏览次数：44
背景
- 最近手上有一个小程序项目，上周接到这样一个需求，用戶可以将一个页面下载到本地，分享给朋友/朋友圈（这里的分享是指将当前页面作为小程序的缩略图进行小程序的分享），需要下载或分享的页面如下：
- 用户需要下载、分享的就是红色框内的海报。
OK，需求明确开始干活了
实现方式，第一次该类型的需求，网上了解到两种实现方式（应该还有更多）
wxml-to-canvas小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景。该组件是由微信提供的Painter一款轻量级的小程序海报生成组件，我在项目中使用了这一种实现方式，因为它支持可视化拖拽生成painter代码，简直不要太香。① 可视化工具地址 ② git地址
【PS】：两种实现的方式原理是一致的，提供物料--绘制canvas--生成图片，关于物料提供：支持矩形，图片，文字等...如果你的需求有canvas，考虑使用
wx.downloadFile将canvas转为图片进行物料提供，我在项目中是这么做的。分析用户需要下载的海报元素组成，图片、文字、canvas（下方的雷达图是canvas标签，需要先将canvas转为图片提供物料）
将
painter重git拉下来放在自己项目的组件中，并在需要使用的页面中注册组件。
.json
"usingComponents": {
"painter":"../../components/painter/painter"
}
复制代码.wxml
<painter :dirty="true" palette="{{paintPallette}}" bind:imgOK="onImgOK"bind:touchEnd="touchEnd" widthPixels="1000" />
//palette 物料对象
//imgOK 绘制成功的回调
//touchEnd 绘制失败的回调
还支持很多方法属性不一一说了
复制代码//物料文件 在上面说的可视化工具画完之后导出json文件就是以下代码，根据你的需求再调整一下
export default class LastMayday {
palette(params) {
return (
{
"width": "375px",
"height": "580px",
"background": "#040406",
"views": [
{
"type": "image",
"url": "网络图片",
"css": {
"width": "355px",
"height": "560px",
"top": "3px",
"left": "10px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "image",
"url": "网络图片",
"css": {
"width": "11px",
"height": "13px",
"top": "16px",
"left": "64px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": params.point + '',
"css": {
"color": "#fff",
"background": "rgba(0,0,0,0)",
"width": "100px",
"height": "20.02px",
"top": "13px",
"left": "81px",
"borderColor": "#000000",
"fontSize": "14px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "20px",
"textAlign": "left"
}
},
{
"type": "image",
"url": "网络图片",
"css": {
"width": "211px",
"height": "209px",
"top": "43px",
"left": "82px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": params.email,
"css": {
"color": "#d4d4d4",
"width": "355px",
"height": "18px",
"top": "300px",
"borderColor": "#000000",
"fontSize": "13px",
"lineHeight": "18",
"textAlign": "center"
}
},
{
"type": "image",
"url": "网络图片",
"css": {
"width": "120px",
"height": "80px",
"top": "327px",
"left": "130px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": params.highestValue,
"css": {
"color": "#f5a623",
"width": "355px",
"height": "33.9px",
"top": "344px",
"left": "10px",
"borderColor": "#000000",
"fontSize": "30px",
"fontWeight": "600",
"lineHeight": "33px",
"textAlign": "center"
}
},
{
"type": "text",
"text": params.highestValueLabel,
"css": {
"color": "#f5a623",
"width": "355px",
"height": "14px",
"top": "381px",
"left": "11px",
"borderColor": "#000000",
"fontSize": "12px",
"fontWeight": "500",
"lineHeight": "13.32px",
"textDecoration": "none",
"textAlign": "center"
}
},
{
"type": "image",
"url": params.radarUrl,
"css": {
"width": "348.55px",
"height": "129.46px",
"top": "426px",
"left": "12px",
"borderColor": "#000000",
}
},
{
"type": "text",
"text": params.name,
"css": {
"color": "#99eff4",
"background": "rgba(0,0,0,0)",
"width": "177.5px",
"height": "24px",
"top": "266px",
"left": "26px",
"fontSize": "21px",
"fontWeight": "600",
"lineHeight": "23px",
"fontFamily": "PingFangSC",
"textAlign": "right"
}
},
{
"type": "text",
"text": params.position,
"css": {
"color": "#d4d4d4",
"width": "155px",
"height": "15px",
"top": "272px",
"left": "207.5px",
"borderColor": "#000000",
"fontSize": "13px",
"fontWeight": "normal",
"lineHeight": "15px",
"textDecoration": "none",
"fontFamily": "PingFangSC",
"textAlign": "left"
}
},
{
"type": "rect",
"css": {
"background": "rgba(247, 107, 28, 1)",
"width": "180px",
"height": "180px",
"top": "60px",
"left": "98px",
"borderRadius": "90px",
"color": "rgba(247, 107, 28, 1)"
}
},
{
"type": "rect",
"css": {
"background": "#000",
"width": "162px",
"height": "162px",
"top": "69px",
"left": "107px",
"borderRadius": "76px",
"color": "#000"
}
},
{
"type": "image",
"url": params.headUrl,
"css": {
"width": "150px",
"height": "150px",
"top": "74px",
"left": "113px",
"borderRadius": "75px",
"borderColor": "#000000",
"mode": "scaleToFill"
}
}
]
}
);
}
}
复制代码- 将该文件引入你的js文件中
import Card from './card'
- 再合适的时机生成对应canvas（用户主动触发或者页面加载完成？看你需求）
this.setData({ paintPallette: new Card().palette(‘需要动态生成的参数’), });
- 看一下绘制成功的回调执行了吗
onImgOK(e) {
console.log(e.detail.path) //到这，你的海报已经生成成功了
},
复制代码接下来就是剩下最简单的步骤了
- 分享
onShareAppMessage() onShareTimeline() 复制代码- 保存到本地
saveImageToPhotosAlbum() //这里需要注意保存到本地需要用户授权，需要处理的是：如果用户第一次点击拒绝，想再次拉起授权框的时候 复制代码以上，没有贴很多代码，以思路为主，不足的地方请各位大佬指导~
