uni-app实现二维码以及小程序实现二维码

1.在uni-app插件市场下载uQRCode二维码生成插件
2.下载完成后在项目中找到uni_modules
在这里插入图片描述
3.如何使用

<template>
	<view class="content">
		<view class="title">uQRCode二维码生成</view>

		<view class="qrcode-box">
			<uqrcode ref="uqrcode" />
			<text class="text">canvas(256px)</text>
		</view>
		<view class="image-box">
			<image class="image" :src="qrcodeSrc" />
			<text class="text">image(400rpx)</text>
		</view>
		<input class="input" v-model="qrcodeText" placeholder="输入内容生成二维码" />
		<button class="button" type="primary" @tap="make">生成二维码</button>
		<button class="button" type="primary" @tap="save">保存二维码</button>

	</view>
</template>

<script>
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode'

	export default {
		data() {
			return {
				qrcodeSize: 256,
				qrcodeText: 'uQRCode 2.0.23 更新时间:2021-08-09',
				qrcodeSrc:""
			
			}
		},
		onLoad() {
			// 在onReady中调用绘制二维码方法,尽量不要在onLoad中
		},
		onReady() {
			this.make()
	
		},
		methods: {
			make() {
				uni.showLoading({
					mask: true,
					title: '生成中...'
				})
				this.$refs
					.uqrcode
					.make({
						size: this.qrcodeSize,
						text: this.qrcodeText,
						enableDelay: true // 启用延迟绘制
					})
					.then(res => {
						// 返回的res与uni.canvasToTempFilePath返回一致
						console.log(res)
						console.log(`生成二维码耗时:${res.time}ms`)
						this.qrcodeSrc = res.tempFilePath
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			save() {
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: 'H5长按image保存'
				})
				return
				// #endif
				
				uni.saveImageToPhotosAlbum({
					filePath: this.qrcodeSrc,
					success: (res) => {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						})
					}
				})
			},
			
		
			
	}
</script>

<style>

</style>

4.如果是生成二维码,接口获取值,在给qrcodeText传入值在调用就可以了this.make()就行了

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值