uni——小程序二维码生成

最新推荐文章于 2024-05-28 16:06:34 发布

耶啵奶膘

最新推荐文章于 2024-05-28 16:06:34 发布

阅读量1.2k

点赞数

分类专栏： uni、vue 文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/xulihua_75/article/details/130542135

版权

案例演示：

后台假设返回123的数据，我们对将其生成二维码并且以弹框的形式显示出来。均封装成组件，谁用谁引。

案例代码

1.uqrcode组件，生成canvas：

<template>
	<view>
		<canvas class="qrcode" id="qrcode" canvas-id="qrocde" type="2d" style="width: 750px;height: 750px;"></canvas>
	</view>
</template>

<script>
	import UQRCode from '@/common/uqrcode.js'
	export default {
     
		name: "uqrcode",
		props: {
     
			text: {
     
				type: String,
				default: ''
			}
		},
		methods: {
     
			async init() {
     
				let qrcodeCanvas = await this.getMyCanvasAndCtx('qrcode');
				console.log(qrcodeCanvas)
				// console.log(qrcodeCanvas)
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.text;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 750;
				// qr.useDynamicSize = true
				qr.margin = 24
				// // 调用制作二维码方法
				qr.make();
				// // 获取canvas元素
				qr.canvasContext = qrcodeCanvas.ctx;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas().then(async () => {
     
					let tempFilePathRes = await this.$common.apiPromise('canvasToTempFilePath',