Applet WeChat
Développement de mini-programmes
Apprenez étape par étape à utiliser le plug-in Canvas+Painter pour créer un code QR dans le mini-programme WeChat.
Apprenez étape par étape à utiliser le plug-in Canvas+Painter pour créer un code QR dans le mini-programme WeChat.
Cet article vous présentera comment utiliser le plug-in Canvas+Painter pour créer des codes QR dans l'applet WeChat. J'espère qu'il vous sera utile !
Dans les petits projets de programmes quotidiens, nous rencontrons souvent le besoin de dessiner dynamiquement des codes QR. Il existe de nombreux scénarios d'utilisation, comme dessiner sur des affiches, créer des codes de ticket, des codes de vérification, etc.
Cet article a été écrit en réponse aux besoins d'un ami, et j'espère qu'il pourra aider les étudiants dans le besoin.
1. Principe de mise en œuvre
Utilisation du composant canevas de l'applet WeChat pour dessiner, mais le composant n'est pas très pratique à utiliser, donc un framework tiers est utilisé : Painter
Adresse Github de Painter : https:// /github.com/Kujiale-Mobile/Painter
Utilisez votre méthode pour télécharger ce framework. Il contiendra du code de démonstration. Il suffit de retirer le code principal.
Pour une introduction à l'utilisation du framework, vous pouvez aller sur github pour parcourir, je vais commencer tout de suite. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]
2. Code d'implémentation
Préparation
1. Créez un nouveau dossier de composants et placez le code principal du peintre
2. un nouveau dossier de palette, placez le code d'implémentation du dessin
code painter.js
export default class LastMayday {
palette(viewList) {
return (
viewList
);
}
}
3. Créez un nouveau dossier d'informations sur les attributs spécifiques au dessin posterViewjs, placez des informations telles que la taille et la position du dessin js.
Informations sur les attributs de dessin du code QR code 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
}
implémentation
implémentation de la structure du répertoire des pages
code wxml
<view> <image></image> <button>生成二维码</button> </view> <!-- canvas隐藏 --> <painter></painter> <!-- canvas隐藏 -->
wxss code
.qrcode-img{
background-color: #999999;
height: 300rpx;
width: 300rpx;
}
json Code
N'oubliez pas de référencer le composant peintre
{
"usingComponents": {
"painter":"/components/painter/painter"
},
"navigationBarTitleText": "绘制二维码"
}
Code JS
// 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() {}
})
pour obtenir l'effet
3. Conclusion
Aucune autre logique dans le développement réel ne sera écrite. Les étudiants doivent réfléchir à des problèmes tels que la gestion eux-mêmes de situations anormales.
Ci-dessus sont quelques-uns de mes résumés d'expérience et de mes idées au cours du processus de développement. S'il y a quelque chose d'incorrect, j'espère que les experts le corrigeront dans la zone de commentaires.
Cet article est reproduit à partir de : https://blog.csdn.net/weixin_44702572/article/details/120443998
Auteur : super--Yang
Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à Programmation! !
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Regardez la page officielle des bandes dessinées NIS en ligne gratuitement. Le site Web d'entrée gratuit de la page de connexion NIS Comics
Jun 12, 2025 pm 08:18 PM
Nice Comics, une plate-forme d'expérience de lecture immersive dédiée à la création pour les amateurs de bandes dessinées, rassemble un grand nombre de ressources de bande dessinée de haute qualité au pays et à l'étranger. Ce n'est pas seulement une plate-forme de lecture de bandes dessinées, mais aussi une communauté qui relie les artistes comiques et les lecteurs et partage la culture comique. Grâce à la conception d'interface simple et intuitive et aux fonctions de recherche puissantes, NES Comics vous permet de trouver facilement vos œuvres préférées et de profiter d'une expérience de lecture fluide et confortable. Dites au revoir aux longues opérations en attente et fastidieuses, entrez immédiatement dans le monde de belles bandes dessinées et commencez votre voyage comique!
Puis-je utiliser WeChat sur deux téléphones en même temps?
Jul 11, 2025 am 03:28 AM
Oui, mais il y a des restrictions. ① Vous pouvez vous connecter au même compte sur les téléphones iPhone et Android, mais vous connecter au dernier appareil entraînera la première session de la session; ② Vous pouvez vous connecter en même temps sur le téléphone mobile et le bureau de l'ordinateur, mais les fonctions ne sont pas synchronisées; ③ Bien que l'utilisation d'outils tiers ou de fonctions à double application puisse permettre la journalisation entre deux téléphones mobiles, il est officiellement pris en charge et peut violer les réglementations; ④ Les solutions alternatives incluent l'utilisation de la version Web / version de bureau pour correspondre au téléphone principal, ou transférer des enregistrements de chat via des outils de sauvegarde et de fichier cloud. Certaines machines Android peuvent également utiliser "Dual Applications" pour exécuter deux instances de compte.
Comment télécharger Huobi sur les téléphones Android? Huobi Télécharger le tutoriel (tutoriel étape par étape)
Jun 12, 2025 pm 10:12 PM
Les utilisateurs de téléphone mobile Android peuvent télécharger et installer l'application Huobi / Huobi via les étapes suivantes: 1. Assurez-vous que le réseau est stable et que l'espace de stockage est suffisant; 2. Téléchargez l'application via le site officiel de Huobi / Huobi, utilisez le navigateur pour accéder au site Web officiel et cliquez sur le lien de téléchargement ou scannez le code QR, ou recherchez et téléchargez via des magasins d'applications tiers tels que Apptreasure et Huawei App Applic Market, et vous pouvez également obtenir le package d'installation via le partage des amis; 3. Trouvez le fichier .APK téléchargé, activez l'autorisation d'installation de "Application Source inconnue", suivez les invites pour terminer l'installation, etc.
Pack de téléchargement et d'installation de Yiou
Jun 12, 2025 pm 10:09 PM
Les étapes de téléchargement et d'installation du client Android Yiou Exchange (OKX) sont les suivantes: 1. Téléchargez le package d'installation authentique officiel via le site officiel www.okx.com ou le code QR officiel; 2. Trouvez le fichier .apk téléchargé dans le gestionnaire de fichiers de téléphone mobile et activez l'autorisation d'installation "Source inconnue"; 3. Cliquez sur le package d'installation à installer, et une fois l'installation terminée, ouvrez l'application et inscrivez-vous ou connectez-vous au compte; 4. Configurer des mots de passe complexes, activer la vérification secondaire, modifier régulièrement des mots de passe, conserver correctement les clés privées et les mnémoniques et se méfier des sites Web de phishing pour garantir la sécurité du compte.
Huobi V10.52.0 Version Android officielle Huobi Android Version Télécharger Tutoriel
Jun 18, 2025 pm 07:33 PM
L'application Huobi est la principale plateforme de trading d'actifs numériques au monde, offrant des services de trading sûrs, pratiques et professionnels. En tant que plate-forme fiable par des millions d'utilisateurs du monde entier, l'application Huobi prend en charge les transactions de diverses monnaies numériques traditionnelles telles que Bitcoin et Ethereum, et fournit une variété d'outils de trading tels que Spot, Contracts et Ledefult. La dernière version de V10.52.0 optimise le moteur de trading, améliore la vitesse et la stabilité, ajoute une variété de nouvelles fonctions de trading et renforce la protection de la sécurité.
Huobi (HTX) Dernière méthode de téléchargement d'applications: package d'installation universel Apple / Android
Jun 18, 2025 pm 08:00 PM
HTX (anciennement Huobi) lance la dernière application mobile, prend en charge les systèmes Apple et Android et fournit des tendances du marché en temps réel, des transactions, une gestion financière du contrat et d'autres fonctions. Les utilisateurs peuvent les télécharger et les installer via le site officiel, TestFlight ou l'App Store.
Gate.io Télécharger Tutorial gate.io Dernière version Télécharger
Jun 18, 2025 pm 07:18 PM
La dernière version de l'application GATE.io peut être téléchargée et installée via la chaîne officielle. 1. Visitez le site officiel Gate.io et consultez l'URL; 2. Cliquez sur l'entrée "Télécharger l'application" sur la page d'accueil ou le bas; 3. Sélectionnez la version Android ou iOS selon le système; 4. Les utilisateurs d'Android peuvent télécharger directement le fichier APK ou l'installer via Google Play; 5. Les utilisateurs iOS sautent dans l'App Store et cliquez sur "Get" Télécharger; 6. Vous pouvez également scanner le code QR du site officiel pour le télécharger directement. La première utilisation nécessite une vérification de la sécurité et une authentification réelle, en comprenant les règles de transaction, en faisant attention aux annonces et en protégeant la sécurité des comptes.
Comment utiliser PHP pour créer des fonctions de partage social PHP Partage d'interface Pratique
Jul 25, 2025 pm 08:51 PM
La méthode principale de création de fonctions de partage social dans PHP est de générer dynamiquement des liens de partage qui répondent aux exigences de chaque plate-forme. 1. Obtenez d'abord la page actuelle ou les informations d'URL et d'article spécifiées; 2. Utilisez UrLencode pour coder les paramètres; 3. Épisser et générer des liens de partage en fonction des protocoles de chaque plate-forme; 4. Afficher les liens sur l'avant pour que les utilisateurs puissent cliquer et partager; 5. Générez dynamiquement des balises OG sur la page pour optimiser l'affichage du contenu du partage; 6. Assurez-vous d'échapper à la saisie des utilisateurs pour empêcher les attaques XSS. Cette méthode ne nécessite pas d'authentification complexe, a de faibles coûts de maintenance et convient à la plupart des besoins de partage de contenu.
