一、前言

在日常的小程式專案中，會經常遇到需要動態繪制二維碼的需求，使用場景很多，例如繪制在海報上，例如制作票務碼、核銷碼等等，
這篇文章是應一位好友的需求而寫的，也希望能夠給有需要的同學一些幫助，

二、實作原理

使用微信小程式的canvas組件進行繪制，但是在該組件用起來并不是很順手，所以使用了第三方的框架：
Painter
Painter的Github地址

用你的方法，把這個框架下載下來，里面會有示范代碼，我們只需要把其中的核心代碼拿出來就行，
對于框架的使用介紹，大家可以前往github瀏覽，我這就直接上手了，

painter能做的不僅僅只是繪制一個二維碼，戳下面鏈接查看帶參海報繪制，
實戰篇-制作微信小程式碼宣傳海報

三、實作代碼

前期準備

1、新建components檔案夾，放置painter核心代碼

2、新建palette檔案夾，放置繪制實作代碼

painter.js代碼

export default class LastMayday {
  palette(viewList) {
    return (
      viewList
    );
  }
}

3、新建繪制的具體屬性資訊檔案夾posterViewjs，放置例如繪制的大小、位置等資訊js，

二維碼繪制屬性資訊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
}

實作

實作頁面目錄結構

wxml代碼

<view class="flex-jc-ac-col" style="margin-top: 200rpx;">
  <image class="qrcode-img" src="{{imgUrl?imgUrl:''}}" mode="widthFix"></image>
  <button type="primary" style="margin-top: 105rpx;" bindtap="makeQRCodeTap">生成二維碼</button>
</view>

<!-- canvas隱藏 -->
<painter customStyle='position: absolute; left: -9999rpx;' customActionStyle="{{customActionStyle}}"
  dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd"
  action="{{action}}" use2D="{{true}}" widthPixels="720" />
<!-- canvas隱藏 -->

wxss代碼

.qrcode-img{
  background-color: #999999;
  height: 300rpx;
  width: 300rpx;
}

json代碼

注意記得在使用的頁面參考painter組件

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  },
  "navigationBarTitleText": "繪制二維碼"
}

JS代碼

// pages/makeQRCode/makeQRCode.js
import poster from '../../palette/painter'
const posterView = require("../../posterViewjs/posterView")
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    imgUrl: null,
    QRCodeText: "2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",
    paintPallette: '',
  },

  /**
   * 生命周期函式--監聽頁面加載
   */
  onl oad() {

  },

  /**
   * 生命周期函式--監聽頁面顯示
   */
  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() {}
})

實作效果

四、結語

實際開發中的其他邏輯就不寫了，需要同學們自己去考慮例外情況處理等問題啦，

有任何疑問可以在評論區留下，我每天都會進行回復，私聊不回，（為了刷積分）

以上均是本人開發程序中的一些經驗總結與領悟，如果有什么不正確的地方，希望大佬們評論區斧正，

💥最后！！！不管這篇文章對你有沒有用，既然都看到最后了，
👍贊一個！！！
🤩當然，順帶收藏就最好了，
😎歡迎轉載，原創不易，轉載請注明出處?，

😊如果你對小程式開發有興趣或者正在學習小程式開發，可以關注我，每一篇都是原創，每一篇都是干貨噢~，