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

2. Buat folder palet baharu dan letakkan kod pelaksanaan lukisan

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.

Kod QR melukis maklumat atribut kod 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
}

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

Pengarang: super--Yang

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