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

PLC新手必看:三菱FX2N顺序功能图的5个常见错误及解决方法

三菱FX2N顺序功能图实战避坑指南&#xff1a;从原理到调试的完整解决方案 第一次接触三菱FX2N的顺序功能图编程时&#xff0c;那种既兴奋又忐忑的心情至今记忆犹新。看着逻辑清晰的流程图在仿真中运行失常&#xff0c;或是设备突然"抽风"时的茫然&#xff0c;是每个P…...

Qt实战:用QTreeWidget打造班级管理系统(含右键菜单完整源码)

Qt实战&#xff1a;用QTreeWidget构建高交互班级管理系统 在Qt框架中&#xff0c;QTreeWidget作为展示层级数据的利器&#xff0c;特别适合教育管理系统的开发需求。不同于简单的列表控件&#xff0c;树形结构能直观呈现班级、年级、学生等多级关系&#xff0c;配合右键菜单可实…...

GeoSeg终极指南:基于Transformer的遥感图像语义分割实战教程

GeoSeg终极指南&#xff1a;基于Transformer的遥感图像语义分割实战教程 【免费下载链接】GeoSeg UNetFormer: A UNet-like transformer for efficient semantic segmentation of remote sensing urban scene imagery, ISPRS. Also, including other vision transformers and C…...

3个实用技巧:让Mermaid图表创作效率翻倍的秘密武器

3个实用技巧&#xff1a;让Mermaid图表创作效率翻倍的秘密武器 【免费下载链接】mermaid mermaid-js/mermaid: 是一个用于生成图表和流程图的 Markdown 渲染器&#xff0c;支持多种图表类型和丰富的样式。适合对 Markdown、图表和流程图以及想要使用 Markdown 绘制图表和流程图…...

feishu2md:飞书文档转Markdown的技术实现与架构解析

feishu2md&#xff1a;飞书文档转Markdown的技术实现与架构解析 【免费下载链接】feishu2md 一键命令下载飞书文档为 Markdown 项目地址: https://gitcode.com/gh_mirrors/fe/feishu2md 飞书文档转Markdown工具feishu2md为技术团队提供了文档格式转换的标准化解决方案。…...

RWKV7-1.5B-g1a多语言生成能力展示:中英日韩混合提示词真实输出效果对比

RWKV7-1.5B-g1a多语言生成能力展示&#xff1a;中英日韩混合提示词真实输出效果对比 1. 模型简介与核心能力 rwkv7-1.5B-g1a是基于新一代RWKV-7架构开发的多语言文本生成模型&#xff0c;特别优化了中英日韩四种语言的混合处理能力。这个1.5B参数的版本在保持轻量化的同时&am…...

3步实现手游PC级操控:QtScrcpy键鼠映射技术全解析

3步实现手游PC级操控&#xff1a;QtScrcpy键鼠映射技术全解析 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy …...

MacBook Pro本地部署OpenClaw:百川2-13B量化模型7×24小时运行方案

MacBook Pro本地部署OpenClaw&#xff1a;百川2-13B量化模型724小时运行方案 1. 为什么选择MacBook Pro部署OpenClaw&#xff1f; 去年冬天&#xff0c;当我第一次尝试在MacBook Pro上部署量化版百川2-13B模型时&#xff0c;身边的朋友都觉得我疯了。"M1芯片能跑得动13B…...

VSCode + CMake + MinGW 配置踩坑实录:从‘make’命令报错到一键编译调试全搞定

VSCode CMake MinGW 配置踩坑实录&#xff1a;从‘make’命令报错到一键编译调试全搞定 如果你正在尝试用VSCode搭建C开发环境&#xff0c;大概率已经看过无数篇教程&#xff0c;但依然会在某个环节卡住——可能是CMake找不到编译器&#xff0c;可能是调试器无法启动&#x…...

bert-base-chinese场景解析:从语义相似度计算到特征提取实战

BERT-base-chinese场景解析&#xff1a;从语义相似度计算到特征提取实战 1. 模型概述与核心价值 BERT-base-chinese是Google推出的中文预训练语言模型&#xff0c;基于Transformer架构构建&#xff0c;专门针对中文文本处理进行了优化。作为NLP领域的里程碑式模型&#xff0c…...