Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.-미니 프로그램 개발-php.cn

Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.

青灯夜游

풀어 주다： 2021-11-08 09:58:14

앞으로

4470명이 탐색했습니다.

이 글에서는 캔버스+페인터 플러그인을 사용하여 WeChat 애플릿에서 QR 코드를 생성하는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.

일상적인 소규모 프로그램 프로젝트에서 우리는 QR 코드를 동적으로 그려야 하는 경우를 자주 접하게 됩니다. 포스터 그리기, 티켓 코드, 인증 코드 만들기 등 다양한 사용 시나리오가 있습니다.
이 글은 친구의 요청으로 작성되었으며, 도움이 필요한 학생들에게 조금이나마 도움이 되기를 바랍니다.

1. 구현 원리

WeChat 애플릿의 캔버스 구성 요소를 사용하지만 사용하기가 매우 편리하지 않아 타사 프레임워크를 사용합니다: Painter

Painter의 Github 주소: https:/ /github.com/Kujiale-Mobile/Painter

이 프레임워크를 다운로드하려면 데모 코드가 있어야 합니다. 핵심 코드만 꺼내면 됩니다.

프레임워크 사용에 대한 소개는 github에 가서 찾아보시면 바로 시작하겠습니다. [관련 학습 추천 : Mini 프로그램 개발 튜토리얼]

2. 구현 코드

준비

1.페인터 코어 코드를 배치합니다

Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.

2. 새 팔레트 폴더에 도면 구현 코드

Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.
painter.js 코드

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

로그인 후 복사

를 배치합니다. 3. 새 도면 특정 속성 정보 폴더인 PosterViewjs를 생성하고 도면 js의 크기 및 위치와 같은 정보를 배치합니다.

Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.

QR 코드 그리기 속성 정보 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
}

로그인 후 복사

implementation

페이지 디렉토리 구조 구현

Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.

wxml code

<view>
  <image></image>
  <button>生成二维码</button>
</view>

<!-- canvas隐藏 -->
<painter></painter>
<!-- canvas隐藏 -->

로그인 후 복사

wxss 코드

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

로그인 후 복사

json 코드

효과

를 얻으려면 페인터 구성 요소

{
  "usingComponents": {
    "painter":"/components/painter/painter"
  },
  "navigationBarTitleText": "绘制二维码"
}

로그인 후 복사

JS 코드 Canvas+Painter 플러그인을 사용하여 WeChat 미니 프로그램에서 QR 코드를 생성하는 방법을 단계별로 가르쳐드립니다.

// 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() {}
})

로그인 후 복사