多端-H5-二维码生成

最新推荐文章于 2024-07-13 18:02:44 发布

影月赋

最新推荐文章于 2024-07-13 18:02:44 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/qq_41778208/article/details/112163782

版权

多端-H5-二维码生成

一、依赖

yarn add qrcode

二、导入

import QRCode from 'qrcode'

三、使用

npm文档：QRCode的api文档
简单使用：

// 生成base64图片格式的二维码
QRCode.toDataURL('http://www.baidu.com', {
     errorCorrectionLevel: 'H',
      type: 'image/jpeg',
      quality: 1,
      margin: 10,
  }).then(codeImg => {
   	// http://www.baidu.com 生成的base64二维码
  	console.log(codeImg)
  }).catch(err => {
      console.error(err)
  })

四、示例

import { Component } from '@tq-prism/prism'
import { View, Image } from '@tq-prism/components'
import QRCode from 'qrcode'

interface TestState {
    /**
     * 二维码图片
     */
    codeImg: string,
}

export default class Test extends Component<{}, TestState> {

    constructor() {
        super()

        this.config = {
            navigationBarTitleText: '二维码',
        }

        this.state = {
            codeImg: '',
        }
    }

    componentDidMount() {
        const content = 'http://www.baidu.com'
        QRCode.toDataURL(content).then((codeImg: string) => {
            console.log('codeImg', codeImg)
            this.setState({
                codeImg
            })
        }).catch((err: any) => {
            console.error(err)
        })
    }

    render() {

        const { codeImg } = this.state

        return (
            <View>
                <Image
                    src={codeImg}
                />
            </View>
        )
    }
}