当前位置:网站首页>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>
边栏推荐
- es6新增-对象部分
- Redis source code analysis skip table implementation
- [ES6] explain in detail the common objects and other methods of set and array (full version)
- Cesium geojson数据的添加与移除
- Rk356x u-boot Institute (command section) 3.4 usage of MEM memory related commands
- Continue from the previous issue: the remaining two methods of the rotation chart
- 分布式存储-fastdfs
- GoFrame 错误处理的常用方法&错误码的使用
- 线上软件测试培训机构柠檬班与iTest.AI平台达成战略合作
- Easypoi之excel模板导出
猜你喜欢
随机推荐
Wechat applet status bar
ECS deployment web project
js 原生对象加属性
Single arm routing configuration
Nacos配置管理
2.6.2 内存泄漏
ArcMap creates a constant grid and tessellates it into a new grid
遍历的方法总结
手把手教你复现Log4j2核弹级漏洞
Switch user mode, privileged mode, global mode, port mode
2020-11-10
Implementation of synchronization interface of 6 libcurl based on libco
Easypoi之excel模板导出
Easypoi excel multi sheet import
The first smart contract program faucet sol
Two methods of rotation chart and automatic rotation
Easypoi之excel多sheet导入
性能瓶颈查找-火焰图分析
Redis source code analysis 2 iterator
Pat class B 1017: a divided by B









