uniapp 将 url 地址转化为二维码展示

您所在的位置：网站首页 › 怎么把网址链接变成二维码 › uniapp 将 url 地址转化为二维码展示

uniapp 将 url 地址转化为二维码展示

2024-07-16 09:34| 来源: 网络整理| 查看: 265

文章目录项目需求解决问题1. qrious.js插件2. 简单认识 qrious 配置参数3.现实二维码生成4. 核心代码

项目需求

uniapp 开发 H5 过程中会有邀请、分享等相关的需求。邀请与分享的 url地址要以二维码的形式进行展示，并且 url地址是动态可变化。

解决问题 1. qrious.js插件

在 npm 中有一个叫 Qrious 二维码生成插件；

npm install qrious --save 2. 简单认识 qrious 配置参数参数类型默认值说明valueString空需要编码为二维码的值、url字符sizeNumber100二维码的尺寸，单位像素levelStringL二维码的误差校正级别(L, M, Q, H)mimeStringimage/png二维码输出为图片时的MIME类型foregroundStringblack二维码的前景颜色backgroundStringwhite二维码的背景颜色 3.现实二维码生成

话不多说看代码：

立即邀请 import Qrcode from 'qrious'; export default { data() { return { title: 'Hello', show: false, qrCodeImage: '' } }, methods: { getQriousCode() { this.show = true; let qr = new Qrcode({ value: "www.baidu.com" }); this.qrCodeImage = qr.toDataURL(); }, } } .content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; } .popup { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(135, 135, 135, 0.6); } .custom-qrcode { width: 300rpx; height: 300rpx; }

在这里插入图片描述

4. 核心代码

根据需求改变相关参数，获得想要的结果。

getQriousCode() { this.show = true; let qr = new Qrcode({ value: "https://blog.csdn.net/weixin_49175501", // url地址 background:'white', // 背景色 foreground:'#8dc63f' ,// 二维码颜色 level:'L', // 二维码复杂程度 size:200 ,// 尺寸大小 mime:'image/png' // 图片类型 }); this.qrCodeImage = qr.toDataURL(); // 生成url图片 },

在这里插入图片描述

有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。

【本文地址】

uniapp 将 url 地址转化为二维码展示

uniapp 将 url 地址转化为二维码展示

今日新闻

推荐新闻