Das WeChat-Applet, das den Freundeskreis teilt, generiert Poster

WeChat-Applet ermöglicht das Teilen in Moments

Teilen in Moments Heutzutage besteht die übliche Methode aller darin, ein Bild über Canvas zu erstellen und es dann zu speichern Laden Sie es herunter und leiten Sie es an Ihren Freundeskreis weiter. Ein aktuelles Projekt hatte diese Anforderung, also habe ich sie aufgezeichnet.

Wenn Sie nach dem Scannen des QR-Codes auf dem Poster direkt zur angegebenen Seite springen möchten, müssen Sie zunächst einen QR-Code mit Parametern generieren:

1. Schreiben Sie zuerst den Code

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

index.json im Inneren Code:

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

Komponenten-Download-Adresse:

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

2. Objektstruktur

1. Die erste Ebene des Datenobjekts erfordert drei Parameter: Breite, Höhe, Ansichten. Alle Zahlen in der Konfiguration sind einheitenlos. Das bedeutet, dass die Leinwand ein proportionales Bild zeichnet. Um die spezifische Anzeigegröße zu bestimmen, fügen Sie einfach den zurückgegebenen Bildpfad in das Bild-Tag ein.

2. Derzeit können 3 Arten von Konfigurationen gezeichnet werden: Bild, Text und Rechteck. Die konfigurierten Attribute verwenden grundsätzlich Kamel-CSS-Namen, die relativ leicht zu verstehen sind.

Bild (Bild)

Attribut

Bedeutung

Standardwert

Optionaler Wert

url

Die gezeichnete Bildadresse, die lokal sein kann Bild, wie zum Beispiel: /images/1.jpeg

属性	含义	默认值	可选值
url	绘制的图片地址，可以是本地图片，如：/images/1.jpeg
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0

top

Der Abstand zwischen der oberen linken Ecke und dem oberen Rand der Zeichenfläche

left

Der Abstand zwischen der oberen linken Ecke und der linken Seite der Zeichenfläche

width

Wie breit soll gezeichnet werden

0

height

Wie hoch zeichnen

0

text（文本）

属性	含义	默认值	可选值
content	Inhalt	Neue Version
color	Schwarz	schwarz
fontSize	字体大小	16
textAlign	文字对齐方式	left	center、left、right
lineHeight	行高,只有在多行文本中才有用	20
top	文本左上角距离画板顶部的距离	0
left	文本左上角距离画板左侧的距离	0	td>
breakWord	是否需要换行	false	true、false
MaxLineNumber	最大行数，只有BreakWord: true td>
0

属性	含义	默认值	可选值
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

Rechteck (Rechteck, Linie)

属性	含义	默认值	可选值
background	背景颜色	black
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0

Diese Methode Das Zeichnen von Postern für WeChat-Miniprogramme ist sehr einfach und leicht zu verstehen, und Sie können voneinander lernen.

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet, das den Freundeskreis teilt, generiert Poster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!