0
点赞
收藏
分享

微信扫一扫

uniapp 小程序生成erweima

雷亚荣 2023-09-24 阅读 24

下载uqrcode.js文件

https://download.csdn.net/download/weixin_46162592/88215531?spm=1001.2014.3001.5503

下载好后,将文件夹放置common文件中,这个放置位置看你们自己需求,一般是common里面。

import uQRCode from '@/common/uqrcode.js'

html

<template>
    <view>
        <canvas canvas-id="qrcode":style="{width:qrWidth+'px',height:qrWidth+'px'}"></canvas>
	</view>
</template>
 
<script>
    import uQRCode from '@/common/uqrcode.js'
    export default {
        onLoad() {
            // 获取手机屏幕大小
            uni.getSystemInfo({
				success: (res)=> {
					if(res.windowWidth<375) {
						this.qrWidth = 175
					} else {
						this.qrWidth = res.windowWidth / 1.8
					}
				}
			});
			this.QRurl = 'https://mp.csdn.net'
			this.qrFun(this.QRurl)
		},
        data() {
			return {
				QRurl: '',
                qrWidth:0
			}
		},
        methods: {
            qrFun(text) {
				uQRCode.make({
					canvasId: 'qrcode',  // 必须与上面canvas-id="qrcode"值一致
					componentInstance: this,  // 组件实例
					text: text,  // 二维码内容
					size: this.qrWidth,  // 单位px,做了手机适配
					margin: 0,
					backgroundColor: '#ffffff',  //背景颜色
					foregroundColor: '#000000',  // 前景颜色
					fileType: 'jpg',  // 二维码图片类型
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,  // 容错级别
					success: res => {
						// 生成二维码成功后的操作
                        // ...
					}
				})
			}
        }
    }
</script>


举报

相关推荐

0 条评论