小程序開發(fā)筆記《六》如何生成自己的二維碼

需求說明:
根據(jù)用戶登錄名生成每個(gè)人的專屬二維碼。
微信小程序有提供生成小程序碼的方法,但是卻沒有生成普通文本或網(wǎng)頁鏈接二維碼的方法,因此自己去網(wǎng)上找了插件weapp-qrcode,它是根據(jù)qrcode.js改進(jìn)的。

效果預(yù)覽:

使用方法:

wxml:

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

js:(可在drawQrcode的參數(shù)text處傳入個(gè)人信息,這里方便展示使用的百度鏈接)

//將 dist 目錄下,weapp.qrcode.js 復(fù)制到項(xiàng)目目錄中, 在需要生成二維碼頁面的js文件引入。
import drawQrcode from '../../utils/weapp.qrcode.js'

Page({
  data: {
    text: 'https://m.baidu.com'
  },
  onLoad () {
    this.draw()
  },
  draw () {
    drawQrcode({
      width: 160,
      height: 160,
      x: 20,
      y: 20,
      canvasId: 'myQrcode',
      // ctx: wx.createCanvasContext('myQrcode'),
      typeNumber: 10,
      text: this.data.text,
      image: {
        imageResource: '../../images/icon.png',
        dx: 70,
        dy: 70,
        dWidth: 60,
        dHeight: 60
      },
      callback(e) {
        console.log('e: ', e)
      }
    })
  }
})

原文作者技術(shù)博客:http://www.itdecent.cn/u/ac4daaeecdfe

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容