当前位置: 首页 > 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…...

二相四线步进电机驱动全解析:从原理到Proteus仿真避坑指南

二相四线步进电机驱动全解析&#xff1a;从原理到Proteus仿真避坑指南 在工业自动化与嵌入式开发领域&#xff0c;步进电机因其精准的位置控制能力成为不可或缺的执行元件。而二相四线制步进电机凭借结构简单、成本低廉的优势&#xff0c;尤其受到电子工程师和创客群体的青睐。…...

PyCharm项目环境混乱?试试用Mamba+environment.yml打造可复现的纯净工作流

PyCharm项目环境混乱&#xff1f;试试用Mambaenvironment.yml打造可复现的纯净工作流 当团队协作开发Python项目时&#xff0c;最令人头疼的问题莫过于"在我机器上能跑"的经典困境。不同成员使用不同版本的依赖包&#xff0c;或者本地环境被多个项目污染&#xff0c;…...

谈谈你对springAop动态代理的理解?

面试 你要调用目标方法&#xff0c;不直接调用&#xff0c;而是交给代理对象&#xff0c;代理对象会先做额外功能&#xff0c;再调用原方法&#xff0c;最后再收尾。 至于叫动态代理的原因&#xff0c;是因为这个代理不是你手动写死的&#xff0c;而是程序在运行期间动态生成…...

终极指南:如何深度定制webMAN-MOD打造专属PS3游戏管家

终极指南&#xff1a;如何深度定制webMAN-MOD打造专属PS3游戏管家 【免费下载链接】webMAN-MOD Extended services for PS3 console (web server, ftp server, netiso, ntfs, ps3mapi, etc.) 项目地址: https://gitcode.com/gh_mirrors/we/webMAN-MOD 你是否曾为PS3游戏…...

基于智能体(Agent)的自动化图像工作流:Wan2.2-I2V-A14B与任务编排

基于智能体&#xff08;Agent&#xff09;的自动化图像工作流&#xff1a;Wan2.2-I2V-A14B与任务编排 1. 引言&#xff1a;当图像生成遇上智能体 想象一下这样的场景&#xff1a;你需要为电商平台制作一组节日主题的广告图&#xff0c;包含特定风格的背景、商品展示和人物互动…...

不用Arduino IDE也能烧录ESP32-CAM?试试这个更简单的工具

告别Arduino IDE&#xff1a;5种高效烧录ESP32-CAM的替代方案 当开发者第一次接触ESP32-CAM时&#xff0c;Arduino IDE往往是默认的烧录工具。但随着时间的推移&#xff0c;许多用户会发现这个"官方推荐"的环境存在诸多限制&#xff1a;臃肿的安装包、缓慢的编译速度…...

实用教程!用fft npainting lama镜像批量处理图片水印

实用教程&#xff01;用fft npainting lama镜像批量处理图片水印 1. 引言 1.1 为什么需要批量水印处理 在日常工作中&#xff0c;我们经常遇到需要处理大量带有水印图片的情况。无论是电商平台的商品图、社交媒体上的素材&#xff0c;还是企业内部文档&#xff0c;水印的存在…...

深入剖析大数据领域数据分片的优缺点

深入剖析大数据领域数据分片的优缺点 关键词&#xff1a;数据分片、大数据架构、分片策略、水平扩展、分布式系统 摘要&#xff1a;在大数据时代&#xff0c;单台服务器已无法承载海量数据的存储与计算需求&#xff0c;数据分片&#xff08;Sharding&#xff09;作为分布式系统…...

Spring AI:Spring生态的AI工程框架全面解析

Spring AI&#xff1a;Spring生态的AI工程框架全面解析 【免费下载链接】spring-ai An Application Framework for AI Engineering 项目地址: https://gitcode.com/GitHub_Trending/spr/spring-ai Spring AI是Spring生态系统中的AI工程框架&#xff0c;为Java开发者提供…...

LangChainJS智能代理开发:构建自主决策的AI系统完整指南

LangChainJS智能代理开发&#xff1a;构建自主决策的AI系统完整指南 【免费下载链接】langchainjs 项目地址: https://gitcode.com/GitHub_Trending/la/langchainjs LangChainJS是一个强大的JavaScript/TypeScript框架&#xff0c;专门用于构建基于大语言模型&#xff…...