小程序开发笔记《六》如何生成自己的二维码

需求说明:
根据用户登录名生成每个人的专属二维码。
微信小程序有提供生成小程序码的方法,但是却没有生成普通文本或网页链接二维码的方法,因此自己去网上找了插件weapp-qrcode,它是根据qrcode.js改进的。

效果预览:

使用方法:

wxml:


js:(可在drawQrcode的参数text处传入个人信息,这里方便展示使用的百度链接)

//将 dist 目录下,weapp.qrcode.js 复制到项目目录中, 在需要生成二维码页面的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)
      }
    })
  }
})

原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

你可能感兴趣的:(小程序开发笔记《六》如何生成自己的二维码)