WeChat applet implements sharing to Moments
Sharing Moments Nowadays, everyone’s common method is to generate a picture through Canvas Then save it and forward it to your circle of friends. A recent project had this requirement, so I recorded it.
If you want to jump directly to the specified page after scanning the QR code on the poster, then you need to generate a QR code with parameters. Take a look at the rendering first:
1. Write the code first
##index.wxml code:
<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 code:
.share-image { width: 600rpx; height: 810rpx; margin: 0 75rpx; padding: 1px; margin-top: 40px; } button { margin-top: 100rpx; }
index.js code:
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 }) } } })
Inside index.json Code:
{ "navigationBarTitleText": "生成海报", "usingComponents": { //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行) "canvasdrawer": "/components/canvasdrawer/canvasdrawer" } }
Component download address:
链接:https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 提取码:8hrj
2. Object structure
1. The first layer of the data object requires three parameters: width, height, views. All numbers in the configuration are unitless. This means that canvas draws a proportional image. To determine the specific display size, simply place the returned image path in the image tag. 2. Currently, three types of configurations can be drawn: image, text, and rect. The configured attributes basically use camel case names of css, which are relatively easy to understand.image (picture)
Meaning | Default value | Optional value | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
The drawn image address, which can be Local image, such as: /images/1.jpeg | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
#width |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
0 |
height |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
0 | ## text (text)
#bolder
|
The above is the detailed content of WeChat applet sharing circle of friends generates posters. For more information, please follow other related articles on the PHP Chinese website!