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>

效果图

相关推荐
2501_915921433 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_915909067 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106327 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909067 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007477 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088913 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
iOS阿玮15 小时前
喜欢做马甲包的有福了~现在多了一招续费方式!
uni-app·app·apple
_AaronWong18 小时前
一键搞定UniApp WiFi连接!这个Vue 3 Hook让你少走弯路
前端·微信小程序·uni-app
2501_915909061 天前
tcpdump 抓包数据分析实战,命令、过滤、常见故障定位与真机补充流程
网络·测试工具·ios·小程序·uni-app·iphone·tcpdump