Le cercle d'amis de partage de l'applet WeChat génère des affiches

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 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>

code index.wxss :

.share-image {
    width: 600rpx;
    height: 810rpx;  
    margin: 0 75rpx;  
    padding: 1px;  
    margin-top: 40px;
}
button {
    margin-top: 100rpx;
}

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
            })
        }
    }
})

index.json à l'intérieur Code :

{
  "navigationBarTitleText": "生成海报",
  "usingComponents": {
    //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer" 
  }
}

Adresse de téléchargement du composant :

链接：https://pan.baidu.com/s/1i9zq01x58p1MdDMVmnz-_Q&shfl=sharepset 
提取码：8hrj

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!