微信小程序实现分享到朋友圈
分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存，然后自行转发朋友圈。最近项目有这个需求, 于是就记录一下。
如果想要海报上的二维码扫码完直接跳到指定的页面, 那么就需要生成一个带参数的二维码，先看一下效果图：
一、先把代码写上去
index.wxml代码：
<view class="container">
<image src="{{shareImage}}" class="share-image"></image>
<canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
<button bind:tap="eventDraw">绘制</button>
<button bind:tap="eventSave">保存到本地</button>
</view>index.wxss代码：
.share-image {
width: 600rpx;
height: 810rpx;
margin: 0 75rpx;
padding: 1px;
margin-top: 40px;
}
button {
margin-top: 100rpx;
}index.js代码：
Page({
data: {
painting: {},
shareImage: '',
},
onLoad() {
this.eventDraw()
},
eventDraw() {
var that = this;
wx.showLoading({
title: '绘制分享图片中',
mask: true
})
this.setData({
painting: {
width: 375,
height: 568,
clear: true,
views: [
//这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
{
type: 'image',
url: 'https://XXX.com/weixin/item/bai.jpg',
width: 375,
height: 568
},
//边框,直接拿了一张图,当做边框
{
type: 'image',
url: 'https://XXXXX.com/weixin/item/biankuang.png',
width: 375,
height: 568
},
//商品图
{
type: 'image',
url: 'https://XXX.com/seafood/public78fffad452d2e158636b.jpg',
width: 328,
height: 328,
top:20,
left:22,
},
//商品名称
{
type: 'text',
content: '产品名称产品11111',
fontSize: 20,
lineHeight: 21,
color: '#000000',
textAlign: 'left',
top: 360,
left: 36,
width: 290,
MaxLineNumber: 2,
breakWord: true,
bolder: true
},
//线条,同样也是用的图
{
type: 'image',
url: 'https://XXXX.com/weixin/item/xiantiao.png',
width: 325,
height: 5,
top: 443,
left:22
},
//商品价格
{
type: 'text',
content: '￥198.00',
fontSize: 20,
color: '#E62004',
textAlign: 'left',
top: 414,
left: 36,
bolder: true
},
//名称
{
type: 'text',
content: '名称名称',
fontSize: 15,
lineHeight: 21,
color: '#7E7E8B',
textAlign: 'left',
top: 414,
left: 267,
width: 70,
MaxLineNumber: 1,
breakWord: true,
},
// 文字, 打不出这个文字带阴影的效果, 所以也用的图
{
type: 'image',
url: 'https://XXXX.com/weixin/item/wenzi.png',
width: 145,
height: 75,
top: 460,
left: 36,
},
//二维码
{
type: 'image',
url: 'https://XXXX.com/Public/Home/images/banner/min_code.jpg',
top: 455,
left: 260,
width: 85,
height: 85
},
]
}
})
},
eventSave() {
wx.saveImageToPhotosAlbum({
filePath: this.data.shareImage,
success(res) {
wx.showToast({
title: '保存图片成功',
icon: 'success',
duration: 2000
})
}
})
},
eventGetImage(event) {
console.log(event)
wx.hideLoading()
const {
tempFilePath,
errMsg
} = event.detail
if (errMsg === 'canvasdrawer:ok') {
this.setData({
shareImage: tempFilePath
})
}
}
})index.json里面的代码：
{
"navigationBarTitleText": "生成海报",
"usingComponents": {
//在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
"canvasdrawer": "/components/canvasdrawer/canvasdrawer"
}
}组件下载地址：
链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 提取码：8hrj
二、对象结构
1.数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。
2.当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。
image（图片）
| 属性 | 含义 | 默认值 | 可选值 |
| url | 绘制的图片地址，可以是本地图片，如：/images/1.jpeg | ||
| top | 左上角距离画板顶部的距离 | ||
| left | 左上角距离画板左侧的距离 | ||
| width | 要画多宽 | 0 | |
| height | 要画多高 | 0 |
text（文本）
| 属性 | 含义 | 默认值 | 可选值 |
| content | 绘制文本 | 默认为空 | |
| color | 颜色 | black | |
| fontSize | 字体大小 | 16 | |
| textAlign | 文字对齐方式 | left | center、left、right |
| lineHeight | 行高，只有在多行文本中才有用 | 20 | |
| top | 文本左上角距离画板顶部的距离 | 0 | |
| left | 文本左上角距离画板左侧的距离 | 0 | |
| breakWord | 是否需要换行 | false | true、false |
| MaxLineNumber | 最大行数，只有设置 breakWord: true ，当前属性才有效，超出行数内容的显示为… | 2 | |
width |
和 MaxLineNumber 属性配套使用，width 就是达到换行的宽度 | 0 |
| bolder | 是否加粗 | false | true、false |
| textDecoration | 显示中划线、下划线效果 | none | underline（下划线）、line-through（中划线） |
rect (矩形，线条)
| 属性 | 含义 | 默认值 | 可选值 |
| background | 背景颜色 | black | |
| top | 左上角距离画板顶部的距离 | ||
| left | 左上角距离画板左侧的距离 | ||
| width | 要画多宽 | 0 | |
| height | 要画多高 | 0 |
这个方法绘制微信小程序的海报非常简单，简单易懂，可以互相学习学习。
以上是微信小程序分享朋友圈生成海报的详细内容。更多信息请关注PHP中文网其他相关文章！
