uniapp 小程序生成erweima
  dIorYTw0tXJC 2023年11月02日 34 0
er

下载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>


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  dIorYTw0tXJC   2023年11月02日   35   0   0 er
dIorYTw0tXJC