业务场景
在微信中 小程序无法分享到朋友圈，目前大部分的解决方案都是，canvas动态绘制 生成图片后，保存到用户相册，用户进行分享照片到朋友圈，朋友圈打开图片后识别二维码进入小程序，达到分享目的
github源码链接
/richard1015…
微信IDE代码预览
developers./s/DBZhf8mB7…
海报需求设计图分析
图1分析： 可以看到海报 要求宽750 高1218（当然了数据是动态的，高度肯定不会固定值，需要我们动态去计算）
图2分析：矩形框 宽高为固定值 320 背景颜色#fff 圆角10
图3分析：矩形框 上半部分 宽320 高125 背景颜色#f7f7f7
代码逻辑实现
1.模板逻辑 wxml添加canvas公用组件
<!--pages/index/index.wxml--><view class='index'><!-- 公用canvas share --><import src="../common/canvasShare.wxml" /><template data="{{shareCanvasItem}}" is="canvas-share" /><!-- content 内容预显示 begin --><view class='content'><view class='content_header'><view class='left' bindtap='toChoiceBank'><text>中国银行（测试数据）</text></view></view><view class='content_item'>...此处省略</view></view><!-- content end --><import src="../common/footerShare.wxml" /><template is="footer-share" /></view>复制代码
2.canvas公用模板设计
<template name="canvas-share"><!-- <view style='width:0px;height:0px;overflow:hidden;opacity: 0;'> --><canvas style="height:{{shareCanvasItem.Height}}px !important;" class='shareCanvas' canvas-id="shareCanvas" binderror="canvasIdErrorCallback"></canvas><!-- </view> --></template>复制代码
3.js 逻辑实现
// 调用公用组件let {CanvasUtil,util} = getApp();// 测试数据引入const testData= require('../../test.js');Page({/*** 页面的初始数据*/data: {shareCanvasItem: {Height: 5000},//初始canvas高度，设置背景黑，此高度必须大于 动态生成内容高度，否则 无法全面覆盖背景items: [],},onLoad: function() {this.getList();},//获取列表数据getList() {var self = this;// purchasePrice 汇买价// cashPrice 钞买价// sellingPrice 汇卖价// banknotePrice 钞卖价//赋值过滤健全itemself.setData({items: testData});},/* 分享事件 */share: function() {console.log('分享');var self = this;let titleTemp = `今日中行外汇牌价`;let tips = '*以上为保存时间的牌价，成交价格以实际交易为准';// 获取设备宽高var res = wx.getSystemInfoSync();var canvasWidth = res.windowWidth;var canvasHeight = self.data.shareCanvasItem.Height;// 获取canvas的的宽 自适应宽（设备宽/750) pxvar Rpx = (canvasWidth / 750).toFixed(2);//上边距var paddingTop = Rpx * 20;//左边距var paddingLeft = Rpx * 20;//右边距var paddingRight = Rpx * 20;//当前编写高var currentLineHeight = Rpx * 33;var context = wx.createCanvasContext('shareCanvas');//全局背景颜色默认填充context.setFillStyle('#333333');context.fillRect(0, 0, canvasWidth, canvasHeight);//字体颜色context.setFillStyle('#999999');context.setTextAlign('center');context.font = `${(Rpx * 36).toFixed(0)}px PingFangSC-Regular`;//内容行边距计算currentLineHeight += Rpx * 36;//标题文本 绘制context.fillText(titleTemp, canvasWidth / 2, currentLineHeight);context.setTextAlign('left');//内容行边距计算currentLineHeight += Rpx * 34;//item白色背景 矩形左右边距let padingLeftRightRect = Rpx * 40,rectRadius = Rpx * 10, //圆角10rectWidth = Rpx * 320, //宽rectHeight = Rpx * 320, //高topRectHeight = Rpx * 125; //美元上部分self.data.items.forEach((item, index) => {//保存上次绘制图，进行本次操作// context.save();//每两次进行换行逻辑if (index > 1 && index % 2 === 0) {//行高换行currentLineHeight += rectHeight + Rpx * 40;//边距重置padingLeftRightRect = Rpx * 40;}//局部 y currentLineHeight//局部 x padingLeftRightRect// 偶数为 left 处理逻辑 奇数为right 处理逻辑//leftif (index % 2 === 0) {} else {//right 坐标 = 加矩形宽 + 中间距30padingLeftRightRect += rectWidth + Rpx * 30;}//矩形颜色设置context.setFillStyle('#ffffff');//调用绘制圆角矩形CanvasUtil.drawRoundedRect(context, padingLeftRightRect, currentLineHeight, rectWidth, rectHeight, rectRadius, true);//矩形上变背景颜色生成context.setFillStyle('#f7f7f7');//调用绘制圆角矩形CanvasUtil.drawRoundedRect(context, padingLeftRightRect, currentLineHeight, rectWidth, topRectHeight, rectRadius, true);//币种字体颜色context.setFillStyle('#333333');context.font = `${(Rpx * 34).toFixed(0)}px PingFangSC-Regular`;//币种文本绘制context.fillText(item.chName, padingLeftRightRect + Rpx * 26, currentLineHeight + Rpx * 30 + Rpx * 34);//币种英文绘制context.fillText(item.abridge, padingLeftRightRect + Rpx * 26, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);//绘制币种图案context.drawImage(`/currencyImg/${item.iconName}`, padingLeftRightRect + Rpx * 226, currentLineHeight + Rpx * 35, Rpx * 64, Rpx * 64);//价格字体颜色context.setFillStyle('#666666');context.font = `${(Rpx * 26).toFixed(0)}px PingFangSC-Regular`;context.fillText('钞买价', padingLeftRightRect + Rpx * 26, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 70, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);context.fillText('汇买价', padingLeftRightRect + Rpx * 26, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 110, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);context.fillText('钞卖价', padingLeftRightRect + Rpx * 26, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 150, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);context.fillText('汇卖价', padingLeftRightRect + Rpx * 26, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 190, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);//价格值字体颜色context.setFillStyle('#333333');//钞买价context.fillText(item.cashPrice, padingLeftRightRect + Rpx * 204, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 70, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);// 汇买价context.fillText(item.purchasePrice, padingLeftRightRect + Rpx * 204, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 110, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);//钞卖价context.fillText(item.banknotePrice, padingLeftRightRect + Rpx * 204, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 150, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);//汇卖价context.fillText(item.sellingPrice, padingLeftRightRect + Rpx * 204, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 190, currentLineHeight + Rpx * 30 + Rpx * 34 * 2 + Rpx * 10);//操作完成后恢复上次值// context.restore();});//行高换行currentLineHeight += rectHeight + Rpx * 40;//字体颜色context.setFillStyle('#999999');context.setTextAlign('center');context.font = `${(Rpx * 28).toFixed(0)}px PingFangSC-Regular`;//领取提示文本 绘制context.fillText(tips, canvasWidth / 2, currentLineHeight);//行高换行currentLineHeight += Rpx * 30;//qrcode生成图片context.drawImage('/imgs/qrcode.png', paddingLeft, currentLineHeight, canvasWidth - paddingLeft - paddingRight, Rpx * 200);context.setTextAlign('left');//字体颜色context.setFillStyle('#EEC62E');context.font = `${(Rpx * 32).toFixed(0)}px PingFangSC-Regular`;//领取提示文本 绘制context.fillText('测试canvas', paddingLeft + Rpx * 43, currentLineHeight + Rpx * 90);//字体颜色context.setFillStyle('#999999');context.font = `${(Rpx * 28).toFixed(0)}px PingFangSC-Regular`;//领取提示文本 绘制context.fillText('出境游、炒汇必备神器', paddingLeft + Rpx * 43, currentLineHeight + Rpx * 130);//内容行高控制currentLineHeight += Rpx * 220;//设置最终canvas高度self.setData({shareCanvasItem: {Height: currentLineHeight}});//绘制完成context.draw();//调用公共组件保存图片util.saveImg();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function(res) {}})复制代码
