WeChat-Applet
Mini-Programmentwicklung
Erfahren Sie Schritt für Schritt, wie Sie mit dem Canvas+Painter-Plug-in einen QR-Code im WeChat-Miniprogramm erstellen
Erfahren Sie Schritt für Schritt, wie Sie mit dem Canvas+Painter-Plug-in einen QR-Code im WeChat-Miniprogramm erstellen
In diesem Artikel erfahren Sie, wie Sie mit dem Canvas+Painter-Plugin QR-Codes im WeChat-Applet erstellen.
In täglichen kleinen Programmprojekten stoßen wir häufig auf die Notwendigkeit, QR-Codes dynamisch zu zeichnen. Es gibt viele Verwendungsszenarien, z. B. das Zeichnen auf Postern, das Erstellen von Ticketcodes, Verifizierungscodes usw.
Dieser Artikel wurde als Reaktion auf die Bedürfnisse eines Freundes geschrieben und ich hoffe, dass er Schülern in Not helfen kann.
1. Implementierungsprinzip
Verwendung der Canvas-Komponente des WeChat-Applets zum Zeichnen, aber die Komponente ist nicht sehr praktisch, daher wird ein Drittanbieter-Framework verwendet: Painter
Painters Github-Adresse: https:/ /github.com/Kujiale-Mobile/Painter
Verwenden Sie Ihre Methode, um dieses Framework herunterzuladen. Es enthält Demonstrationscode. Wir müssen nur den Kerncode herausnehmen.
Für eine Einführung in die Verwendung des Frameworks können Sie auf Github stöbern, ich werde sofort loslegen. [Verwandte Lernempfehlungen: Mini-Programmentwicklungs-Tutorial
2. Implementierungscode
Vorbereitung
1. Erstellen Sie einen neuen Komponentenordner und platzieren Sie den Painter-Kerncode
painter.js-Code
export default class LastMayday {
palette(viewList) {
return (
viewList
);
}
} 3. Erstellen Sie einen neuen zeichnungsspezifischen Attributinformationsordner posterViewjs und platzieren Sie Informationen wie die Größe und Position der Zeichnungs-JS.
const getPosterView01 = (qrcodeText) => {
const poster01 = {
"width": "256px",
"height": "256px",
"background": "#f8f8f8",
"views": [{
"type": "qrcode",
"content": qrcodeText,
"css": {
"color": "#000000",
"background": "#ffffff",
"width": "256px",
"height": "256px",
"top": "0px",
"left": "0px",
"rotate": "0",
"borderRadius": "0px"
}
}]
}
return poster01
}
module.exports = {
getPosterView01: getPosterView01
}
Implementierung
Implementierung der Seitenverzeichnisstruktur
wxml.-Code
<view> <image></image> <button>生成二维码</button> </view> <!-- canvas隐藏 --> <painter></painter> <!-- canvas隐藏 -->
wxss-Code
.qrcode-img{
background-color: #999999;
height: 300rpx;
width: 300rpx;
}
json Code
Denken Sie daran, auf die Malerkomponente{
"usingComponents": {
"painter":"/components/painter/painter"
},
"navigationBarTitleText": "绘制二维码"
}
JS-Code
// pages/makeQRCode/makeQRCode.js
import poster from '../../palette/painter'
const posterView = require("../../posterViewjs/posterView")
Page({
/**
* 页面的初始数据
*/
data: {
imgUrl: null,
QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",
paintPallette: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow () {
},
/** 生成海报点击监听 */
makeQRCodeTap() {
wx.showLoading({
title: '获取海报中',
mask: true
})
// 绘制海报
this.makePoster(this.data.QRCodeText)
},
/** 绘制完成后的回调函数*/
onImgOK(res) {
wx.hideLoading()
// 这个路径就可以作为保存图片时的资源路径
// console.log("海报临时路径", res.detail.path)
this.setData({
imgUrl: res.detail.path
})
},
/** 生成海报 */
makePoster(qrcodeText) {
wx.showLoading({
title: '生成海报中',
})
// 这是绘制海报所用到JSON数据
const viewList = posterView.getPosterView01(qrcodeText)
this.setData({
paintPallette: new poster().palette(viewList)
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {}
})
zu verweisen, um den Effekt zu erzielen
3. Fazit
Andere Logik in der tatsächlichen Entwicklung wird nicht geschrieben werden. Die Schüler müssen sich mit Themen wie dem selbständigen Umgang mit ungewöhnlichen Situationen befassen. Das Obige sind einige meiner Erfahrungszusammenfassungen und Erkenntnisse während des Entwicklungsprozesses. Wenn etwas nicht stimmt, hoffe ich, dass die Experten es im Kommentarbereich korrigieren.Dieser Artikel wurde reproduziert von: https://blog.csdn.net/weixin_44702572/article/details/120443998Autor: super--YangWeitere Programmierkenntnisse finden Sie unter:
Einführung in Programmieren! !
Das obige ist der detaillierte Inhalt vonErfahren Sie Schritt für Schritt, wie Sie mit dem Canvas+Painter-Plug-in einen QR-Code im WeChat-Miniprogramm erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1597
29
1486
72
TIKTOK Web Version Eingang Anmeldeverlink -Adresse Https Tiktok Web Version Eingangswebsite kostenlos
May 22, 2025 pm 04:24 PM
Das Login -Portal für die Douyin -Webversion ist https://www.douyin.com/. Die Anmeldeschritte umfassen: 1. öffnen Sie den Browser; 2. Geben Sie die URL https://www.douyin.com/; 3. Klicken Sie auf die Schaltfläche "Anmeldung" und wählen Sie die Anmeldemethode. 4. Geben Sie das Kontokennwort ein. 5. Komplett Login. Die Webversion bietet Funktionen wie Browsing, Suchen, Interaktion, Hochladen von Videos und persönlichem Homepage-Management und bietet Vorteile wie großer Erfahrungen, Multitasking, bequemes Kontomanagement und Datenstatistiken.
Sind diese C2C -Transaktionen in Binance riskant?
Apr 30, 2025 pm 06:54 PM
Mit Binance C2C -Transaktionen können Benutzer Kryptowährungen direkt kaufen und verkaufen und auf die Risiken von Gegenpartei, Zahlung und Preisschwankungen achten. Die Auswahl von Nutzern mit hoher Nrennstufe und sichere Zahlungsmethoden kann die Risiken reduzieren.
Kopieren Sie Comics (offizielle Website -Eingang) _copy Comics (NBA) Echtes Online -Leseportal
Jun 05, 2025 pm 04:12 PM
Das Kopieren von Comics ist zweifellos ein Schatz, der nicht übersehen werden kann. Hier finden Sie Basketball -Comics in verschiedenen Stilen, von leidenschaftlichen und inspirierenden Wettbewerbsgeschichten bis hin zu entspannten und humorvollen täglichen Komödien. Unabhängig davon, ob Sie die Klassiker noch einmal erleben oder neue Werke entdecken möchten, kann das Kopieren von Comics Ihre Bedürfnisse erfüllen. Durch das authentische Online-Leseportal, das von Copy Comics bereitgestellt wird, verabschieden Sie sich von der Mühe von Rabour-Ressourcen, genießen Sie eine hochauflösende und reibungslose Leseerfahrung und können Ihre bevorzugten Comic-Autoren unterstützen und zur Entwicklung authentischer Comics beitragen.
Was ist besser, UC -Browser oder QQ -Browser? Eingehender Vergleich und Bewertung von UC- und QQ-Browsern
May 22, 2025 pm 08:33 PM
Die Auswahl des UC -Browsers oder der QQ -Browser hängt von Ihren Anforderungen ab: 1. UC -Browser ist für Benutzer geeignet, die schnelle Lade- und reichhaltige Unterhaltungsfunktionen verfolgen. 2. QQ Browser eignet sich für Benutzer, die Stabilität und nahtlose Verbindung mit Tencent -Produkten benötigen.
Top 10 KI -Schreibsoftware -Rankings empfohlen, welche KI -Schreibsoftware kostenlos ist
Jun 04, 2025 pm 03:27 PM
Die Kombination der neuesten Branchentrends und mehrdimensionalen Bewertungsdaten im Jahr 2025 sind die folgenden Top-Ten-Empfehlungen für KI.
Sehen Sie sich die offizielle Seite von NIS Comics online für kostenlose Comics an. Die Free -Eintrags -Website der NIS Comics -Anmeldeseite
Jun 12, 2025 pm 08:18 PM
Nice Comics, eine immersive Leserfahrungsplattform, die sich der Erstellung von Comicliebhabern widmet, vereint eine große Anzahl hochwertiger Comic-Ressourcen im In- und Ausland. Es ist nicht nur eine Comic -Leseplattform, sondern auch eine Community, die Comic -Künstler und Leser verbindet und die Comic -Kultur teilt. Mit einfachem und intuitivem Schnittstellendesign und leistungsstarken Suchfunktionen können Sie mit NES Comics Ihre Lieblingswerke problemlos finden und ein reibungsloses und komfortables Leseerlebnis genießen. Verabschieden Sie sich von den langen Warten und mühsamen Operationen, betreten Sie sofort die Welt der netten Comics und beginnen Sie Ihre Comic -Reise!
Frog Man Online anzeigen Eingangsmann Frog Man (Webseiteneingang) online ansehen
Jun 12, 2025 pm 08:06 PM
Frogman Comics ist die erste Wahl für viele Comicliebhaber mit seinen reichen und vielfältigen Comic -Ressourcen und einem bequemen und reibungslosen Online -Leseerlebnis. Es ist wie ein pulsierender Teich, mit frischen und interessanten Geschichten, die ständig auftauchen und darauf warten, dass Sie entdecken und erkunden. Frog Man Comics berichten von einer Vielzahl von Themen, von leidenschaftlichen Abenteuern bis hin zu süßer Liebe, von Fantasie und Science -Fiction bis hin zu Spannung, egal welches Genre Sie mögen, Sie finden Ihre Lieblingswerke hier. Mit seinem einfachen und intuitiven Schnittstellendesign können Sie leicht loslegen, schnell die Comics finden, die Sie lesen möchten, und sich in die aufregende Comic -Welt eintauchen.
Baozi Comics (Eingang) _ Baozi Comics (neuer Eingang) 2025
Jun 05, 2025 pm 04:18 PM
Hier können Sie den riesigen Ozean der Comics genießen und Werke verschiedener Themen und Stile erkunden, von leidenschaftlichen jungen Mann-Comics bis hin zu zarten und bewegenden Mädchen-Comics, von spannend und hirnverbrennenden Mystery-Comics bis hin zu entspannten und lustigen täglichen Comics, alles, und es gibt immer eine, die Ihre Herzstrings berühren kann. Wir haben nicht nur eine große Menge echter Comic -Ressourcen, sondern auch die neuesten Arbeiten ständig vor, um sicherzustellen, dass Sie Ihre Lieblingscomics so schnell wie möglich lesen können.
