weapp qrcode

weapp-qrcode

weapp.qrcode.js gera rapidamente códigos QR em miniprogramas WeChat

Uso

Primeiro, crie canvas para desenho no arquivo wxml e defina width , height e canvasId .

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

Importe diretamente o arquivo js e use drawQrcode() para desenhar o código QR. !!!Antes de chamar o método drawQrcode() , certifique-se de obter canvas context .

Na versão v0.6.0, vários arquivos são construídos, consulte a descrição dos Arquivos de Construção para obter detalhes.

 // 将 dist 目录下，weapp.qrcode.esm.js 复制到项目目录中
import drawQrcode from '../../utils/weapp.qrcode.esm.js'

drawQrcode ( {
  width : 200 ,
  height : 200 ,
  canvasId : 'myQrcode' ,
  // ctx: wx.createCanvasContext('myQrcode'),
  text : 'https://github.com/yingye' ,
  // v1.0.0+版本支持在二维码上绘制图片
  image : {
    imageResource : '../../images/icon.png' ,
    dx : 70 ,
    dy : 70 ,
    dWidth : 60 ,
    dHeight : 60
  }
} )

Se o projeto usar a estrutura wepy, você poderá instalar diretamente o pacote weapp-qrcode npm.

 npm install weapp-qrcode --save

 import drawQrcode from 'weapp-qrcode'

drawQrcode ( {
  width : 200 ,
  height : 200 ,
  canvasId : 'myQrcode' ,
  text : 'https://github.com/yingye'
} ) 

DEMONSTRAÇÃO

Para mais demonstrações, consulte o diretório de exemplos. Os exemplos incluem sintaxe nativa e estruturas WePY, mpvue e Taro.

API

desenharQrcode([opções])

opções

Tipo: Objeto

parâmetro	ilustrar	Exemplo
largura	Deve, a largura do código QR deve ser consistente com width da canvas	200
altura	Deve, a altura do código QR deve ser consistente com height canvas .	200
ID da tela	Opcional, canvasId para desenhar	'myQrcode'
ctx	Contexto de desenho opcional, pode ser obtido por meio de wx.createCanvasContext('canvasId') , compatível com a versão v1.0.0+	'wx.createCanvasContext('canvasId')'
texto	Obrigatório, conteúdo do código QR	'https://github.com/yingye'
tipoNúmero	Opcional, modo de cálculo de código QR, valor padrão -1	8
nível correto	Opcional, nível de correção de erros do código QR, o valor padrão é avançado, valores: { L: 1, M: 0, Q: 3, H: 2 }	1
fundo	Opcional, cor de fundo do código QR, o valor padrão é branco	'#ffffff'
primeiro plano	Opcional, cor de primeiro plano do código QR, o valor padrão é preto	'#000000'
_esse	Não obrigatório. Se usado em um componente, ele precisa ser transmitido. Compatível com a versão v0.7.0+.	esse
ligar de volta	Opcional, função de retorno de chamada após a conclusão do desenho, suportada pela versão v0.8.0+. Os problemas de compatibilidade do telefone Android podem ser resolvidos configurando você mesmo o cronômetro. Para obter mais informações, consulte a edição nº 18.	function (e) { console.log('e', e) }
x	Opcional, a posição inicial do eixo x para desenho de código QR, o valor padrão é 0, compatível com a versão v1.0.0+	100
sim	Opcional, a posição inicial do eixo y para desenho de código QR, o valor padrão é 0, compatível com a versão v1.0.0+	100
imagem	Não é necessário desenhar na tela. O nível é superior ao código QR . É compatível com a versão v1.0.0+.	{ imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }

As informações de localização podem ser visualizadas na figura abaixo:

PONTAS

A parte de geração de código QR de weapp.qrcode.js baseia-se no código-fonte jquery-qrcode. Você pode consultar jquery-qrcode.