applet WeChat
Pembangunan program mini
Ajar anda langkah demi langkah cara menggunakan pemalam Canvas Painter untuk mencipta kod QR dalam program mini WeChat
Ajar anda langkah demi langkah cara menggunakan pemalam Canvas Painter untuk mencipta kod QR dalam program mini WeChat
Artikel ini akan memperkenalkan kepada anda cara menggunakan pemalam Pelukis kanvas untuk mencipta kod QR dalam applet WeChat saya harap ia akan membantu anda!
Dalam projek program mini harian, kami sering menghadapi keperluan untuk melukis kod QR secara dinamik. Terdapat banyak senario penggunaan, seperti melukis pada poster, membuat kod tiket, kod pengesahan, dsb.
Artikel ini ditulis sebagai menyahut permintaan rakan, dan saya harap ia dapat memberi sedikit bantuan kepada pelajar yang memerlukan.
1. Prinsip Pelaksanaan
Gunakan komponen kanvas applet WeChat untuk melukis, tetapi komponen ini tidak begitu mudah digunakan, jadi rangka kerja pihak ketiga adalah digunakan ：Painter
Alamat Github Painter: https://github.com/Kujiale-Mobile/Painter
Gunakan kaedah anda untuk memuat turun rangka kerja ini akan ada kod demonstrasi di dalamnya keluarkan kod teras.
Untuk pengenalan kepada penggunaan rangka kerja, anda boleh pergi ke github untuk menyemak imbas, saya akan mulakan terus. [Cadangan pembelajaran berkaitan: Tutorial pembangunan program mini]
2 Kod pelaksanaan
Persediaan awal<.>
1 Cipta folder komponen baharu dan letakkan kod teras pelukis
kod painter.js
export default class LastMayday {
palette(viewList) {
return (
viewList
);
}
} 3. Buat folder maklumat atribut khusus lukisan baru posterViewjs dan letak maklumat js seperti saiz dan kedudukan lukisan itu.
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
}
Pelaksanaan
Laksanakan struktur direktori halaman
kod wxml
<view> <image></image> <button>生成二维码</button> </view> <!-- canvas隐藏 --> <painter></painter> <!-- canvas隐藏 -->
kod wxss
.qrcode-img{
background-color: #999999;
height: 300rpx;
width: 300rpx;
}
kod json
Sila ingat untuk merujuk komponen pelukis dalam halaman yang anda gunakan{
"usingComponents": {
"painter":"/components/painter/painter"
},
"navigationBarTitleText": "绘制二维码"
}
JS kod
// 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() {}
})
Kesan realisasi
3 >Dalam pembangunan sebenar Logik lain tidak akan ditulis. Pelajar perlu mempertimbangkan isu-isu seperti mengendalikan sendiri situasi yang tidak normal. Di atas adalah sebahagian daripada rumusan dan pandangan pengalaman saya semasa proses pembangunan jika ada yang tidak betul, saya harap pakar akan membetulkannya di ruangan komen.
Artikel ini diterbitkan semula daripada: https://blog.csdn.net/weixin_44702572/article/details/120443998Pengarang: super--YangUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
Pengenalan kepada Pengaturcaraan
! !
Atas ialah kandungan terperinci Ajar anda langkah demi langkah cara menggunakan pemalam Canvas Painter untuk mencipta kod QR dalam program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Tonton halaman rasmi NIS Comics dalam talian untuk komik percuma. Laman Web Kemasukan Percuma Laman Masuk NIS Comics
Jun 12, 2025 pm 08:18 PM
Komik yang bagus, platform pengalaman membaca yang mendalam yang didedikasikan untuk mencipta pencinta komik, menyatukan sejumlah besar sumber komik berkualiti tinggi di rumah dan di luar negara. Ia bukan sahaja platform membaca komik, tetapi juga komuniti yang menghubungkan artis komik dan pembaca dan berkongsi budaya komik. Melalui reka bentuk antara muka yang mudah dan intuitif dan fungsi carian yang kuat, NES Comics membolehkan anda dengan mudah mencari karya kegemaran anda dan menikmati pengalaman membaca yang lancar dan selesa. Katakan selamat tinggal kepada operasi yang lama menunggu dan membosankan, masukkan dunia komik yang bagus dengan serta -merta dan mulakan perjalanan komik anda!
Bolehkah saya menggunakan WeChat pada dua telefon pada masa yang sama?
Jul 11, 2025 am 03:28 AM
Ya, tetapi ada sekatan. ① Anda boleh log masuk ke akaun yang sama pada kedua -dua telefon iPhone dan Android, tetapi log masuk ke peranti terkini akan menyebabkan sesi terawal menjadi luar talian; ② Anda boleh log masuk pada masa yang sama pada telefon bimbit dan desktop komputer, tetapi fungsi tidak disegerakkan; ③ Walaupun menggunakan alat pihak ketiga atau fungsi dwi-apl boleh membolehkan pembalakan di antara dua telefon bimbit, ia tidak disokong secara tidak rasmi dan boleh melanggar peraturan; ④ Penyelesaian alternatif termasuk menggunakan versi Web/Desktop untuk memadankan telefon utama, atau memindahkan rekod sembang melalui sandaran awan dan alat fail. Sesetengah mesin Android juga boleh menggunakan "aplikasi dwi" untuk menjalankan dua contoh akaun.
Bagaimana untuk memuat turun Huobi pada telefon Android? Tutorial Muat Turun Huobi (tutorial langkah demi langkah)
Jun 12, 2025 pm 10:12 PM
Pengguna telefon bimbit Android boleh memuat turun dan memasang aplikasi Huobi/Huobi melalui langkah -langkah berikut: 1. Pastikan rangkaian stabil dan ruang penyimpanan mencukupi; 2. Muat turun aplikasi melalui laman web rasmi Huobi/Huobi, gunakan penyemak imbas untuk mengakses laman web rasmi dan klik pautan muat turun atau mengimbas kod QR, atau cari dan muat turun melalui kedai aplikasi pihak ketiga seperti Apptreasure dan Huawei App Market, dan anda juga boleh mendapatkan pakej pemasangan melalui perkongsian rakan-rakan; 3. Cari fail .apk yang dimuat turun, aktifkan kebenaran pemasangan "Sumber Sumber Tidak Diketahui", ikuti arahan untuk menyelesaikan pemasangan, dan lain -lain.
Yiou Exchange Download and Pemasangan Pek Yiou Android Muat turun dan Pek Pemasangan
Jun 12, 2025 pm 10:09 PM
Langkah -langkah untuk memuat turun dan memasang klien Android Yiou Exchange (OKX) adalah seperti berikut: 1. Muat turun pakej pemasangan tulen rasmi melalui laman web rasmi www.okx.com atau kod QR rasmi; 2. Cari fail .apk yang dimuat turun di Pengurus Fail Telefon Mudah Alih dan aktifkan kebenaran pemasangan "Sumber Tidak Diketahui"; 3. Klik pakej pemasangan untuk dipasang, dan selepas pemasangan selesai, buka aplikasi dan daftar atau log masuk ke akaun; 4. Sediakan kata laluan yang kompleks, membolehkan pengesahan sekunder, kerap menukar kata laluan, menyimpan kunci peribadi dan mnemonik dengan betul, dan berhati -hati dengan laman web phishing untuk memastikan keselamatan akaun.
Huobi v10.52.0 Versi Android rasmi Huobi Android Versi Muat turun Tutorial
Jun 18, 2025 pm 07:33 PM
Huobi App adalah platform perdagangan aset digital terkemuka di dunia, menyediakan perkhidmatan perdagangan yang selamat, mudah dan profesional. Sebagai platform yang dipercayai oleh berjuta -juta pengguna di seluruh dunia, aplikasi Huobi menyokong urus niaga pelbagai mata wang digital arus perdana seperti Bitcoin dan Ethereum, dan menyediakan pelbagai alat perdagangan seperti tempat, kontrak, dan leverage. Versi terbaru V10.52.0 mengoptimumkan enjin perdagangan, meningkatkan kelajuan dan kestabilan, menambah pelbagai fungsi perdagangan baru, dan menguatkan perlindungan keselamatan.
Kaedah Muat Turun Aplikasi Huobi (HTX): Pakej Pemasangan Universal Apple/Android Dapatkan Tutorial
Jun 18, 2025 pm 08:00 PM
HTX (dahulunya Huobi) melancarkan aplikasi mudah alih terkini, menyokong sistem Apple dan Android, dan menyediakan trend pasaran masa nyata, urus niaga, pengurusan kewangan kontrak dan fungsi lain. Pengguna boleh memuat turun dan memasangnya melalui laman web rasmi, TestFlight atau App Store.
Gate.io Muat turun Tutorial Gate.io Muat turun versi terkini
Jun 18, 2025 pm 07:18 PM
Versi terbaru aplikasi Gate.io boleh dimuat turun dan dipasang melalui saluran rasmi. 1. Lawati laman web rasmi Gate.io dan periksa URL; 2. Klik pintu masuk "muat turun aplikasi" di halaman rumah atau bawah; 3. Pilih versi Android atau iOS mengikut sistem; 4. Pengguna Android boleh memuat turun fail APK secara langsung atau memasangnya melalui Google Play; 5. Pengguna iOS melompat ke kedai aplikasi dan klik "Dapatkan" untuk memuat turun; 6. Anda juga boleh mengimbas kod QR laman web rasmi untuk memuat turunnya secara langsung. Penggunaan pertama memerlukan pengesahan keselamatan dan pengesahan nama sebenar, memahami peraturan transaksi, memberi perhatian kepada pengumuman dan melindungi keselamatan akaun.
Cara Menggunakan PHP untuk Membina Fungsi Perkongsian Sosial PHP Perkongsian Interface Integration Practice
Jul 25, 2025 pm 08:51 PM
Kaedah teras untuk membina fungsi perkongsian sosial dalam PHP adalah untuk menghasilkan pautan perkongsian secara dinamik yang memenuhi keperluan setiap platform. 1. Mula -mula dapatkan halaman semasa atau URL dan maklumat artikel yang ditentukan; 2. Gunakan urlencode untuk menyandikan parameter; 3. Sambutan dan menjana pautan perkongsian mengikut protokol setiap platform; 4. Pautan paparan di hujung depan untuk pengguna mengklik dan berkongsi; 5. Dinamik menghasilkan tag OG pada halaman untuk mengoptimumkan paparan kandungan perkongsian; 6. Pastikan untuk melepaskan input pengguna untuk mencegah serangan XSS. Kaedah ini tidak memerlukan pengesahan yang kompleks, mempunyai kos penyelenggaraan yang rendah, dan sesuai untuk kebanyakan keperluan perkongsian kandungan.
