vue/html+qrcode生成付款二维码(前端部分)

1.Vue项目中如何使用qrcode生成付款二维码

一、安装qrcode.js

npm install qrcodejs2

二、新建qrcode.vue组件

<template>
    <div>
        <div id="qrcode" ref="qrCodeUrl">
        </div>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2'
    export default {
        name: "qrCode",
        data(){
            return{
                link:'',
                qrcode:{}
            }
        },
        props:{
          url:{
              type:String,
              default:''
          }
        },
        watch: {
        // 监听url,当url改变时生成二维码(不包括第一次)
            url: {
                handler(newValue) {
                    this.link = newValue
                    this.$nextTick(()=>{
                        this.createQRCode()
                    })
                    // console.log(this.link)
                },
            },
        },
        methods:{
            // 生成二维码
            createQRCode(){
                this.qrcode = new QRCode(this.$refs.qrCodeUrl,{
                    text:this.link,
                    width:160,
                    height:160,
                    colorDark: '#000000',
                    colorLight: '#ffffff'
                })
            }
        },
        // 离开页面时销毁二维码
        beforeDestroy(){
            if(this.qrcode){
                this.qrcode.clear()
            }
            this.$refs.qrCodeUrl.innerHTML = ''
        }
    }
</script>

<style scoped>

</style>

三、项目中引入组件

import QRCodeView from '../../components/qrCode'

components: {
    QRCodeView
},

// 页面中的使用
<QRCodeView :url="url"></QRCodeView>

2.Html项目中如何使用

<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>

<div class="right-wrap">
    <div ref="qrCodeUrl"></div>
</div>

createQrCode(name){
    this.qrcode = new QRCode(this.$refs.qrCodeUrl,{
        text:name,
        width:160,
        height:160,
        colorDark: '#000000',
        colorLight: '#ffffff'
   })
   ipcRenderer.sendToHost('pong') //向webview所在页面的进程传达消息
       setTimeout(()=>{
           ipcRenderer.sendToHost('finished')
       },100)
   }