uniapp使用Vue2框架生成二维码

  1. 生成二维码插件

    npm install qrcodejs2 --save

上代码:

复制代码
<template>
		<view>
	<view class="page" >
       <div	 id="qrCode" ref="qrCodeDiv" ></div>
	 
	</view>
	  <view  class="page">核销码:{{verificationCode}}</view>
	</view>
</template>

<script>
 import QRCode from 'qrcodejs2'
	export default {
		name: "qrCode",
		data() {
			return {
				orderNo:"",
				verificationCode:'',
				qrCodeData:''
			}
		},
	
		onLoad(options) {
		console.log(options.orderNo);
		this.orderNo=options.orderNo
		this.verificationCode=options.verificationCode
		},
		created () { // 初始化以后
		        let _self = this
		        _self.$nextTick(() => { // 调用必须写在 $nextTick 里
		          _self.bindQRCode()
		        })
		      },
		methods: {
			  bindQRCode () {
				   this.qrCodeData=this.orderNo//订单编号作为二维码信息
			          new QRCode(this.$refs.qrCodeDiv, {
			            text: this.qrCodeData,  // 此处为变量,要生成二维码的地址
			            width: 150, // 二维码的宽高
			            height: 150,	
			            colorDark: '#333333',//二维码颜色
			            colorLight: '#ffffff',//二维码背景色
			            correctLevel: QRCode.CorrectLevel.L //容错率。 L/M/H
			          })
			},
			
			  
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.page{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}

	
</style>

效果图

相关推荐
Q_Q51100828534 分钟前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code2 小时前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张3 小时前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921433 小时前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082856 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
ღ᭄ꦿ࿐Never say never꧂8 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀9 小时前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
2501_9151063215 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张1 天前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview
草字1 天前
uniapp 打开横竖屏。usb调试时可以横竖屏切换,但是打包发布后却不行?
java·前端·uni-app