uniapp(微信小程序)生成二维码、保存到手机相册、实现扫码功能

2024-07-15 10:02| 来源: 网络整理| 查看: 265

1.生成二维码

生成二维码使用的插件: Meet-UI 插件安装官网有很多方式,下面介绍我使用的一种方式使用npm指令下载:

npm i @uni-ui/code-ui -save

在pages.json里面配置如下

"easycom": { "^w-(.*)": "@uni-ui/code-ui/components/w-$1/index.vue"//二维码条形码的配置 },

使用: 在模板中输入:

//ref 后续保存到相册会用到 options配置项 @press长按二维码回调函数

data中书写

options: { code: '这是你生成二维码的值', // 生成二维码的值 size: 460, // 460代表生成的二维码的宽高均为460rpx img: { // 二维码log配置非必传 src: '/static/logo.png', // 图片地址 size: 60, // 图片大小 degree: 15, // 圆角大小如果type为round生效 type: 'round', //图片展示类型默认none 可选值 round圆角 circle圆如果为round 可以传入degree设置圆角大小默认 5 color: '#ffffff', //图片周围的白色边框 width: 8 //图片周围白色边框的宽度默认5 }, },

这时就二维码就可以展示出来了

2.长按二维码保存到手机 async longtap(e) { //因qrcode.GetCodeImg是异步操作所以使用async await等待执行 const res = await this.$refs.qrcode.GetCodeImg() uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { uni.showToast({ title: '保存成功，请从相册选择再分享', icon: "none", duration: 2000 }) } }) }, 3.扫描二维码 // 扫描二维码api qrcodeQuery() { uni.showModal({ title: '扫描二维码查看记录', success: res => { if (res.confirm) { uni.scanCode({ onlyFromCamera: false,//设置false,可以从相册中选择,也可以相机扫描 scanType: ['qrCode'],//类型扫描二维码 success: res => { //二维码的值 console.log(res.result); }, fail: err => { //用户进入到扫描界面如果未扫描会进入失败回调 } }); } else if (res.cancel) { console.log('用户点击取消'); } } }); },

【本文地址】

公司简介

联系我们