微信小程序-通过canvas绘制自定义分享卡片样式的注意点

关键点

1. 假设UI设计稿宽、高分别为：500、400，手机屏幕像素密度为: dpr;
2. const dpr = wx.getSystemInfoSync().pixelRatio;
3. 微信小程序分享卡片宽高比固定为5:4；
4. canvas 样式中需要考虑手机屏幕dpr，宽高分别设置为：(500×dpr)px、(400×dpr)px；
5. 绘制时进行缩放设置：canvasContext.scale(dpr, dpr);
6. canvasContext.draw(false, () => {...});
7. wx.canvasToTempFilePath({canvasId, destWidth: 500 * dpr, destHeight: 400 * dpr})

相关代码

<!-- 此处dpr需要根据使用的框架进行变量获取 -->
<canvas id="shareCanvas" style="width:{{500*dpr}}px;height:{{400*dpr}}px;" />

const dpr = wx.getSystemInfoSync().pixelRatio;
// 获取canvasContext代码...
canvasContext.scale(dpr, dpr);
canvasContext.draw(false, () => {
    wx.canvasToTempFilePath({
        canvasId,
        destWidth: 500 * dpr,
        destHeight: 400 * dpr,
        success: function(resp) {
            // resp.tempFilePath 放在 onShareAppmessage 的 imageUrl即可;
        }
    })
})