业务场景

在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的

github源码链接

https://github.com/richard1015/canvas

微信IDE代码预览

https://developers.weixin.qq.com/s/DBZhf8mB7qaD

海报需求设计图分析

图1分析: 可以看到海报 要求宽750 高1218(当然了数据是动态的,高度肯定不会固定值,需要我们动态去计算)

微信小程序分享朋友圈 长海报 canvas 动态高度计算-LMLPHP

图2分析:矩形框 宽高为固定值 320 背景颜色#fff 圆角10

微信小程序分享朋友圈 长海报 canvas 动态高度计算-LMLPHP

图3分析:矩形框 上半部分 宽320 高125 背景颜色#f7f7f7

微信小程序分享朋友圈 长海报 canvas 动态高度计算-LMLPHP

代码逻辑实现

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 钞卖价
//赋值过滤健全item
self.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) px
var 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, //圆角10
rectWidth = 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 处理逻辑
//left
if (index % 2 === 0) { } else {
//right 坐标 = 加矩形宽 + 中间距30
padingLeftRightRect += 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) {}
})
复制代码

CanvasUtil testData 数据代码省略... 请查看顶部源码链接

05-11 15:20