L'applet WeChat réalise le partage dans Moments
Partage dans Moments De nos jours, la méthode courante de tout le monde consiste à générer une image via Canvas, puis à enregistrer et transmettez-le à votre cercle d'amis. Un projet récent avait cette exigence, alors je l'ai enregistré.
Si vous souhaitez accéder directement à la page spécifiée après avoir scanné le code QR sur l'affiche, vous devez alors générer un code QR avec des paramètres. Jetez d'abord un œil au rendu :
. 
1. Écrivez d'abord le code
code index.wxml :
<view>
<image></image>
<canvasdrawer></canvasdrawer>
<button>绘制</button>
<button>保存到本地</button>
</view>
Copier après la connexion
code index.wxss :
.share-image {
width: 600rpx;
height: 810rpx;
margin: 0 75rpx;
padding: 1px;
margin-top: 40px;
}
button {
margin-top: 100rpx;
}Copier après la connexion
code 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
})
}
}
})Copier après la connexion
index.json à l'intérieur Code :
{
"navigationBarTitleText": "生成海报",
"usingComponents": {
//在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
"canvasdrawer": "/components/canvasdrawer/canvasdrawer"
}
}Copier après la connexion
Adresse de téléchargement du composant :
链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset
提取码：8hrj
Copier après la connexion
2. Structure de l'objet
1. La première couche de l'objet de données nécessite trois paramètres : largeur, hauteur, vues. Tous les nombres dans la configuration sont sans unité. Cela signifie que la toile dessine une image proportionnelle. Pour déterminer la taille d'affichage spécifique, placez simplement le chemin de l'image renvoyé dans la balise d'image.
2. Actuellement, 3 types de configurations peuvent être dessinés : image, texte et rect. Les attributs configurés utilisent essentiellement des noms de casse chameau en CSS, qui sont relativement faciles à comprendre.
image (photo)
| Attribut |
Signification |
Valeur par défaut |
Valeur facultative |
| url |
L'adresse de l'image dessinée, qui peut être une adresse locale image , telle que : /images/1.jpeg |
| 属性 |
含义 |
默认值 |
可选值 |
| url |
绘制的图片地址，可以是本地图片，如：/images/1.jpeg |
|
|
| top |
左上角距离画板顶部的距离 |
|
|
| left |
左上角距离画板左侧的距离 |
|
|
| width |
要画多宽 |
0 |
|
| height |
要画多高 |
0 |
|
|
|
| top |
La distance entre le coin supérieur gauche et le haut du plan de travail |
|
|
| left |
La distance entre le coin supérieur gauche et le côté gauche du plan de travail |
|
|
| largeur |
Quelle largeur dessiner | 0 |
|
| hauteur |
À quelle hauteur dessiner |
0 | |
text（文本）
| 属性 |
含义 |
默认值 | 可选值 |
| content |
绘制文本 | 默认为空 |
> |
| couleur |
颜色 |
noir |
|
| fontSize |
字体大小 |
16 |
|
| textAlign |
文字对齐方式 |
gauche |
center、left、right |
| lineHeight |
行高，只有在多行文本中才有用 | 20 |
|
| top |
文本左上角距离画板顶部的距离 |
0 |
|
| gauche |
文本左上角距离板左侧的距离 |
0 |
td> |
| breakWord |
是否需要换行 |
false |
true、false |
| MaxLineNumber |
最大行数，只有设置 breakWord : true ，当前属性才有效，超出行数内容的显示为… |
2 td> |
|
| 属性 |
含义 |
默认值 |
可选值 |
| 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 |
|
width
|
et MaxLineNumber 属性配套使用，width 就是达到换行的宽度 |
0 |
|
| bolder |
是否加粗 |
false |
true、false |
| textDecoration |
显示中划线、下划线效果 |
none |
underline（下划线）、line-through（中划线） |
rect (rectangle, ligne)
| 属性 |
含义 |
默认值 |
可选值 |
| background |
背景颜色 |
black |
|
| top |
左上角距离画板顶部的距离 |
|
|
| left |
左上角距离画板左侧的距离 |
|
|
| width |
要画多宽 |
0 |
|
| height |
要画多高 |
0 |
|
Cette méthode Dessiner des affiches pour les mini-programmes WeChat est très simple et facile à comprendre, et vous pouvez apprendre les uns des autres.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
