当前位置: 首页 > news >正文

uniapp——实现二维码生成+保存二维码图片——基础积累

最近在做二维码推广功能,自从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
<uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx" :loading="loading"
:options="options"></uv-qrcode>

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",// 指定二维码前景,一般可在中间放logoforegroundImageSrc: 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代码部分
<view class="codeCls" @longpress="longpress"><uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx" :loading="loading" :options="options"></uv-qrcode>
</view>
<view class="tipCls">长按图片即可保存</view>
2.2 长按方法——longpress——自定义h5app的保存方法

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

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

longpress() {//#ifdef H5this.$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-PLUSthis.$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——通过qrcodesave方法来实现

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

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

完成!!!多多积累,多多收获!!!

相关文章:

uniapp——实现二维码生成+保存二维码图片——基础积累

最近在做二维码推广功能&#xff0c;自从2020年下半年到今天&#xff0c;大概有三年没有用过uniapp了&#xff0c;而且我之前用uniapp开发的程序还比较少&#xff0c;因此很多功能都浪费了很多时间去查资料&#xff0c;现在把功能记录一下。 这里写目录标题 效果图1.根据接口返…...

零基础学前端(六)重点讲解 JavaScript

1. 该篇适用于从零基础学习前端的小白&#xff0c;完全从零基础角度出发 2. 我们学习时&#xff0c;应该主动向自己提问&#xff1f;只有你能提出问题&#xff0c;你才算是在编程中学习进步了。 3. 初学者不懂得问题很多&#xff0c;在自己在不懂时&#xff0c;一定要求助有经验…...

数据库问题记录(粗略版)oracle、mysql等主流数据库通用

1. ORA-00918&#xff1a;未明确定义列 该问题情况大致为&#xff1a;select 所取列名错误、重复等问题。 2. “select * from temp where 10; ”的含义 布尔值为FALSE&#xff0c;只返回表结构&#xff0c;不返回数据。 举一反三&#xff1a; select * from temp where 1&…...

ORACLE多列中取出数据最大的一条

1.需求说明&#xff1a; 当查询出来的数据存在多条数据时&#xff0c;想按照一定条件排序取出其中一条数据。 2.使用函数&#xff1a; row_number() over( partition by 分组字段 order by 排序字段 desc&#xff09; 3.示例&#xff1a; --根据table_a中的pk_house&#x…...

Xamarin.Android实现App内版本更新

目录 1、具体的效果2、代码实现2.1 基本原理2.2 开发环境2.3 具体代码2.3.1 基本设置2.3.2 系统的权限授予2.3.3 进度条的layout文件2.3.4 核心的升级文件 3、代码下载4、知识点5、参考文献 1、具体的效果 有事需要在程序内集成自动更新的功能&#xff0c;网上找了下&#xff…...

运维工程师面经

文章目录 前言RedisMongoDBPython中的GIL&#xff08;全局解释器锁&#xff09;Python算法总结 前言 本博客仅做学习笔记&#xff0c;如有侵权&#xff0c;联系后即刻更改 科普&#xff1a; Redis 参考网址 NoSQL技术 基于内存的数据库&#xff0c;并且提供一定的持久化功能…...

stm32之智能垃圾桶实战

之前用过51做过一个垃圾桶的小项目&#xff0c;这里用32重新搞了一下。视频的效果和之前一样&#xff0c;可参考这个垃圾桶效果 。 一、项目描述&#xff08;同51&#xff09; 项目主要是模拟不用手动打开垃圾桶盖&#xff0c;而进行自动操作。自动打开的条件如下&#xff1a…...

【C++面向对象侯捷下】2.转换函数 | 3.non-explicit-one-argument ctor

文章目录 operator double() const {} 歧义了 标准库的转换函数...

UOS Deepin Ubuntu Linux 开启 ssh 远程登录

UOS Deepin Ubuntu Linux 开启 ssh 远程登录 打开控制台 安装 openssh-server sudo apt -y install openssh-server修改 /etc/ssh/ssh_config 文件 sudo vim /etc/ssh/ssh_config找到 # Port 22 去掉 # 注释后 保存 重启 ssh 服务 sudo systemctl restart ssh设置 ssh 服务 开机…...

Postman应用——接口请求和响应(Get和Post请求)

文章目录 新增Request请求Get请求Post请求 Request请求响应Postman响应界面说明请求响应另存为示例&#xff08;模板&#xff09;Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式&#xff0c;也可以遵循restful api接口规范&#…...

Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache,lsof)命令

1、什么是buffer/cache &#xff1f; buffer/cache 其实是作为服务器系统的文件数据缓存使用的&#xff0c;尤其是针对进程对文件存在 read/write 操作的时候&#xff0c;所以当你的服务进程在对文件进行读写的时候&#xff0c;Linux内核为了提高服务的读写速度&#xff0c;则将…...

(Vue2)自定义创建项目、ESLint、Vuex

自定义创建项目&#xff1a;基于VueCli自定义创建项目架子 安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter 路由配置项很多&#xff0c;希望创建项目时就把架子搭好 hash模式和history模式 页面跳转和加载模式 Vue为单页面&#xff0c;只有一个HTML…...

LLaMa

文章目录 Problems403 代码文件LLaMA: Open and Efficient Foundation Language Models方法预训练数据结构优化器一些加速的方法 结果Common Sense ReasoningClosed-book Question AnsweringReading ComprehensionMassive Multitask Language Understanding Instruction Finetu…...

API(九)基于协程的并发编程SDK

一 基于协程的并发编程SDK 场景&#xff1a; 收到一个请求会并发发起多个请求,使用openresty提供的协程说明&#xff1a; 这个是高级课程,如果不理解可以先跳过遗留&#xff1a; APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…...

JavaWeb 学习笔记 7:Filter

JavaWeb 学习笔记 7&#xff1a;Filter 1.快速开始 使用过滤器的方式与 Servlet 类似&#xff0c;要实现一个Filter接口&#xff1a; WebFilter("/*") public class FirstFilter implements Filter {public void init(FilterConfig filterConfig) throws ServletE…...

【AI视野·今日Robot 机器人论文速览 第三十五期】Mon, 18 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Mon, 18 Sep 2023 Totally 44 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;GelSplitter, 基于近红外与可见光融合实现高精度surfaceNormal重建的触觉传感器。(from 华中科技大学) 基于分光镜的紧凑型…...

Elasticsearch 在bool查询中使用分词器

1. 创建索引 test setting和mappings 设置了自定义分词映射规则。 PUT /test {"settings": {"analysis": {"filter": {"my_synonym": {"type": "synonym","updateable": true,"synonyms_path&qu…...

在Python中创建相关系数矩阵的6种方法

相关系数矩阵&#xff08;Correlation matrix&#xff09;是数据分析的基本工具。它们让我们了解不同的变量是如何相互关联的。在Python中&#xff0c;有很多个方法可以计算相关系数矩阵&#xff0c;今天我们来对这些方法进行一个总结 Pandas Pandas的DataFrame对象可以使用c…...

物联网、工业大数据平台 TDengine 与苍穹地理信息平台完成兼容互认证

当前&#xff0c;在政府、军事、城市规划、自然资源管理等领域&#xff0c;企业对地理信息的需求迅速增加&#xff0c;人们需要更有效地管理和分析地理数据&#xff0c;以进行决策和规划。在此背景下&#xff0c;“GIS 基础平台”应运而生&#xff0c;它通常指的是一个地理信息…...

this.$nextTick()的使用场景

事件循环机制&#xff1a; 同步代码执行->查找异步队列&#xff0c;推入执行栈&#xff0c;执行Vue.nextTick[事件循环1]->查找异步队列&#xff0c;推入执行栈&#xff0c;执行Vue.nextTick[事件循环2]->查找异步队列&#xff0c;推入执行栈&#xff0c;执行Vue.nex…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...