当前位置:网站首页>H5 page uses JS to generate QR code
H5 page uses JS to generate QR code
2022-07-19 05:24:00 【In the past_ juvenile】
uniapp,vue Can be used
First download qrcode.js link You can create a new one in the root directory utils Folder , Download the js Put it in )
1. introduce js And create data Variable
import qrcode from '@/utils/qrcode.js'
data() {
return {
url: "",
qrcodeURL: ""
}
},
methods: {
// Generate url Two dimensional fullness
creatQrCode(){
this.url = window.location.href // Get a link to the current page url
// this.url = 'https://stbzmall.oss-cn-guangzhou.aliyuncs.com/apk/youfenqi.apk? versionId=CAEQDBiBgMD3xI_R2RciIGNiYzQzYmM2NjRiYzQ5MmViMjJkMDU3MmM2MDA3NmM3'
let params = this.url; // QR code parameters
var imgData = qrcode.drawImg(params, {
typeNumber: 4, // density
errorCorrectLevel: 'L', // Error correction level
size: 800, // White border
})
this.qrcodeURL = imgData
},
}
2. Page using
<view class="qrcode_img" >
<img :src="qrcodeURL" mode="aspectFit"></img>
</view>
<style>
// QR code
.qrcode_img {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
margin: 0 auto;
img {
width: 800px;
height: 200px;
}
}
</style>
边栏推荐
- 父组件加scoped有时也会影响子组件
- Beginner's Guide to learning penetration testing
- cookie是否有效时间限定?如何设置cookie?手把手教你设置
- Ucharts chart, pie chart, bar chart and line chart are used in uniapp
- Pointer advanced simple summary
- (elaborate) ES6 remaining parameters, ES6 built-in objects, template string content (detailed example Dictionary) and practical cases of flexible use of the project
- ArcGIS 点云(xyz)数据转DEM
- Pat class B 1002: write this number
- mysql的锁
- Distributed registry etcd
猜你喜欢

MapBox 加载本地离线地形

Cityengine 3D pipe modeling tutorial

网络命令:网卡信息,netstat,arp

手把手教你复现Log4j2核弹级漏洞

Performance bottleneck finding - Flame graph analysis

Cesium 绑定鼠标事件和移除鼠标事件

Implementation of synchronization interface of 6 libcurl based on libco

Addition and removal of cesium geojson data

Ucharts chart, pie chart, bar chart and line chart are used in uniapp

父组件加scoped有时也会影响子组件
随机推荐
用户态协议栈-基于netmap的UDP实现
CityEngine 三维管道建模教程
Beginner's Guide to learning penetration testing
Two methods of rotation chart and automatic rotation
运维安全要了解的二三事
Cesium 绑定鼠标事件和移除鼠标事件
Cityengine 3D pipe modeling tutorial
Two or three things to know about operation and maintenance safety
Easypoi之excel模板导出
es6新增-对象部分
H5页面使用js生成二维码
Web3js development technology
Switch user mode, privileged mode, global mode, port mode
(elaborate) ES6 remaining parameters, ES6 built-in objects, template string content (detailed example Dictionary) and practical cases of flexible use of the project
Cesium geojson数据的添加与移除
2.6.2 memory leakage
Applet editor rich text editing and rich text parsing
How to deal with the mismatch between subtitle files and video files
Mapbox loads local offline terrain
Solve the problem of inconsistent prediction effect between text detection training model and information model based on paddleocr