除了上图红框中的的内容会发生写变化以外，整体的结构大部分是基本已经固定了的，因为海报内容和业务是强相关的，如果我把绘制的逻辑写入组件里，那岂不是换个业务，我的组件就要改一次？这样失去了组件的通用型肯定是不行的，那怎么办呢？下面介绍一个业界比较好的解决方案:
小程序海报说白了就是由 canvas 画布上绘制的一些形状，图片，文字，线等等组成的，那我们是不是可以把这些绘制的基本能力封装成方法，通过设计稿量出海报上每个元素的位置大小等信息，当作一个配置文件传递给这些绘制方法，这样就保证组件的通用型，而且绘制信息抽离成一个配置文件也更加方便后期维护。
share-config.js:
function setShareInfo(time, start, end, imageSrc) { return { width: 750, height: 1300, background: '#F2FCF8', views: [{ type: 'rect', parent: true, radius: true, radiusVal: 16, left: 40, width: 670, height: 1140, shadow: true, background: '#cacacd', shadowColor: 'rgba(0,0,0,.6)', line: true }, //.... { type: 'text', content: '长按或扫描二维码，查看这条线路', color: '#9B9BA1', top: 1052, left: 224, fontSize: 28, font: 'PingFangSC-Medium', }, { type: 'image', path: '/common/images/station-flag.png', top: 746, left: 80, width: 32, height: 104 } ] } } export { setShareInfo }
只需要在几个动态信息改变时，传入这些变化的值即可。
import { setShareInfo } from '../../common/config/share-config'; page({ onLoad: function() { this.setData({ shareMessageInfoTimeline: setShareInfo('3月7号 下午16:30发车', '腾讯大厦', '平安国际中心', '') }); //... }, });
通过 shareMessageInfoTimeline 获取配置信息
<view> <mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/> </view>
总结本文对小程序分享所需的基础能力进行了拆分详解，把上述能力进行不同的组合，应该可以满足大部分的分享需求。
比如:
动态绘制分享给微信好友的分享图片。
生成并保存小程序海报。