当前位置:网站首页>H5页面使用js生成二维码
H5页面使用js生成二维码
2022-07-17 05:05:00 【昔日_少年】
uniapp,vue皆可使用
首先去下载qrcode.js 链接 可以在根目录中新建utils文件夹,把下载的js放进去)
1.引入js 并创建data变量
import qrcode from '@/utils/qrcode.js'
data() {
return {
url: "",
qrcodeURL: ""
}
},
methods: {
//生成url二维满
creatQrCode(){
this.url = window.location.href //获取当前页面链接url
// this.url = 'https://stbzmall.oss-cn-guangzhou.aliyuncs.com/apk/youfenqi.apk? versionId=CAEQDBiBgMD3xI_R2RciIGNiYzQzYmM2NjRiYzQ5MmViMjJkMDU3MmM2MDA3NmM3'
let params = this.url; // 二维码参数
var imgData = qrcode.drawImg(params, {
typeNumber: 4, // 密度
errorCorrectLevel: 'L', // 纠错等级
size: 800, // 白色边框
})
this.qrcodeURL = imgData
},
}
2.页面使用
<view class="qrcode_img" >
<img :src="qrcodeURL" mode="aspectFit"></img>
</view>
<style>
// 二维码
.qrcode_img {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
margin: 0 auto;
img {
width: 800px;
height: 200px;
}
}
</style>
边栏推荐
猜你喜欢

硬核结构体,暴力解读

HarmonyOS第三次培训笔记

Uni app conditional compilation ifdef ENDIF compatible with multiple terminals

基于cuda10.0的pytorch深度学习环境配置

数据可视化

Pygame:外星人入侵

【2022第十届‘泰迪杯’挑战赛】A题:害虫识别完整版(大致思路。详细过程和代码以及结果csv在压缩包中)

Convolutional neural network

vscode终端无法使用解决的办法

读论文《Learning to Measure Changes: Fully Convolutional Siamese Metric Networks for Scene Change Detec》
随机推荐
多功能(实现)封装函数
Install MySQL
Convolutional neural network
Es6最新常用知识宝典(能够帮助你解决面试题困惑,编写程序中出现的问题等)
【C语言—零基础_学习_复习_第五课】基本运算符的运算性质
Harmonyos fourth training notes
实习项目3-更改所有者
学习C语言第二天
【LeetCode——编程能力入门第一天】基本数据类型[在区间范围内统计奇数数目/去掉最低工资和最高工资后的工资平均值)
PyGame aircraft War 1.0 (step + window no response problem)
es6新增-Symbol数据类型
学习C语言第7天
Message converter (JSON)
Simple use of directexchange switches.
6S参数
Internship project 2 - Homepage configuration - my data module
(精讲)Es6 剩余参数,ES6内置对象,模板字符串内容(详例宝典)及灵活运用项目的实战案例
第十届泰迪杯数据挖掘挑战赛A题害虫识别YOLOv5模型代码(已跑通,原创作品,持续更新)
Infinite classification
es6新增-运算符的扩展