uniapp

2024-06-18 21:38| 来源: 网络整理| 查看: 265

最近在做二维码推广功能，自从2020年下半年到今天，大概有三年没有用过uniapp了，而且我之前用uniapp开发的程序还比较少，因此很多功能都浪费了很多时间去查资料，现在把功能记录一下。

这里写目录标题效果图1.根据接口返回的链接生成二维码——`uv-Qrcode`的用法1.1 插件市场导入`uv-qrcode`插件1.2 当前页面引入`uvQrcode`1.3 `html`代码使用`uvQrcode`1.4 `options`配置1.5 生成二维码 2.长按保存二维码2.1 `html`代码部分2.2 长按方法——`longpress`——自定义`h5`和`app`的保存方法2.3 长按方法——`longpress`——通过`qrcode`的`save`方法来实现

效果图

在这里插入图片描述

下面介绍一下整体流程：

1.根据接口返回的链接生成二维码——uv-Qrcode的用法 1.1 插件市场导入uv-qrcode插件

uv-qrcode插件市场链接：https://ext.dcloud.net.cn/plugin?id=12479 在这里插入图片描述点击下载插件并导入HBuilderX 选择到要导入的项目，然后即可导入成功。

导入后的路径地址：在这里插入图片描述

1.2 当前页面引入uvQrcode import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue'; 1.3 html代码使用uvQrcode

1.carvas-id:唯一的id值，可以用于获取元素 2.value:二维码的内容 3.size:二维码的大小，可以支持数值和字符串，字符串的话支持px和rpx，由于我此处是uniapp，因此写成字符串的rpx单位 4.loading:加载中，可以在生成二维码时展示加载中的效果 5.options:配置内容，包含边框背景颜色前景logo等

1.4 options配置 options: { useDynamicSize: false, errorCorrectLevel: 'Q', margin: 10, areaColor: "#fff", // 指定二维码前景，一般可在中间放logo foregroundImageSrc: require('static/image/logo.png') }

详细内容可以参考：https://uqrcode.cn/doc/document/native.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE

1.5 生成二维码

在这里插入图片描述在代码中的应用：

this.value = "https://www.baidu.com"; this.$nextTick(() => { this.$refs.qrcode.remake({ success: () => { console.log('生成成功'); }, fail: err => { console.log(err) } }); }) 2.长按保存二维码 2.1 html代码部分长按图片即可保存 2.2 长按方法——longpress——自定义h5和app的保存方法

此处我做了处理，如果是app则长按就保存到相册，如果是h5，则我会直接下载二维码：

此处需要先用到一个toTempFilePath的方法：在这里插入图片描述需要将二维码内容转为临时文件路径后，再进行保存。

longpress() { //#ifdef H5 this.$refs.qrcode.toTempFilePath({ success: res => { console.log(111, res); const aEle = document.createElement('a'); aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载' aEle.href = res.tempFilePath; document.body.appendChild(aEle); aEle.click(); aEle.remove(); // 下载之后把创建的元素删除 } }); //#endif // #ifdef APP-PLUS this.$refs.qrcode.toTempFilePath({ success: res => { console.log(111, res); uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { uni.hideLoading(); uni.showToast({ title: "图片已保存" }); }, fail: () => { uni.hideLoading(); uni.showToast({ icon: 'none', title: "图片保存失败" }); } }); } }); // #endif }, 2.3 长按方法——longpress——通过qrcode的save方法来实现

另外还有一个方法：就是直接用save方法：在这里插入图片描述但是用这个方法测试发现：app上没有问题，但是在h5上，则会出现弹窗：这样就出现了重复，而且提示保存成功，保存的路径无从得知。因此还是使用上面的根据app和h5区分处理会比较好。

*后来发现，h5不会自动保存的时候下载是因为没有进行下面三个参数的设置*,设置后即可实现h5的下载。在这里插入图片描述

完成！！！多多积累，多多收获！！！

【本文地址】

公司简介

联系我们