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——自定义h5和app的保存方法
此处我做了处理,如果是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——通过qrcode的save方法来实现
另外还有一个方法:就是直接用save方法:

但是用这个方法测试发现:app上没有问题,但是在h5上,则会出现弹窗:

这样就出现了重复,而且提示保存成功,保存的路径无从得知。
因此还是使用上面的根据app和h5区分处理会比较好。
*后来发现,h5不会自动保存的时候下载是因为没有进行下面三个参数的设置*,设置后即可实现h5的下载。

完成!!!多多积累,多多收获!!!
相关文章:
uniapp——实现二维码生成+保存二维码图片——基础积累
最近在做二维码推广功能,自从2020年下半年到今天,大概有三年没有用过uniapp了,而且我之前用uniapp开发的程序还比较少,因此很多功能都浪费了很多时间去查资料,现在把功能记录一下。 这里写目录标题 效果图1.根据接口返…...
零基础学前端(六)重点讲解 JavaScript
1. 该篇适用于从零基础学习前端的小白,完全从零基础角度出发 2. 我们学习时,应该主动向自己提问?只有你能提出问题,你才算是在编程中学习进步了。 3. 初学者不懂得问题很多,在自己在不懂时,一定要求助有经验…...
数据库问题记录(粗略版)oracle、mysql等主流数据库通用
1. ORA-00918:未明确定义列 该问题情况大致为:select 所取列名错误、重复等问题。 2. “select * from temp where 10; ”的含义 布尔值为FALSE,只返回表结构,不返回数据。 举一反三: select * from temp where 1&…...
ORACLE多列中取出数据最大的一条
1.需求说明: 当查询出来的数据存在多条数据时,想按照一定条件排序取出其中一条数据。 2.使用函数: row_number() over( partition by 分组字段 order by 排序字段 desc) 3.示例: --根据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、具体的效果 有事需要在程序内集成自动更新的功能,网上找了下ÿ…...
运维工程师面经
文章目录 前言RedisMongoDBPython中的GIL(全局解释器锁)Python算法总结 前言 本博客仅做学习笔记,如有侵权,联系后即刻更改 科普: Redis 参考网址 NoSQL技术 基于内存的数据库,并且提供一定的持久化功能…...
stm32之智能垃圾桶实战
之前用过51做过一个垃圾桶的小项目,这里用32重新搞了一下。视频的效果和之前一样,可参考这个垃圾桶效果 。 一、项目描述(同51) 项目主要是模拟不用手动打开垃圾桶盖,而进行自动操作。自动打开的条件如下:…...
【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响应界面说明请求响应另存为示例(模板)Postman显示的响应数据清空请求响应数据保存到本地文件 这里只讲用的比较多的Get和Post请求方式,也可以遵循restful api接口规范&#…...
Linux查看哪些进程占用的系统 buffer/cache 较高 (hcache,lsof)命令
1、什么是buffer/cache ? buffer/cache 其实是作为服务器系统的文件数据缓存使用的,尤其是针对进程对文件存在 read/write 操作的时候,所以当你的服务进程在对文件进行读写的时候,Linux内核为了提高服务的读写速度,则将…...
(Vue2)自定义创建项目、ESLint、Vuex
自定义创建项目:基于VueCli自定义创建项目架子 安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter 路由配置项很多,希望创建项目时就把架子搭好 hash模式和history模式 页面跳转和加载模式 Vue为单页面,只有一个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 场景: 收到一个请求会并发发起多个请求,使用openresty提供的协程说明: 这个是高级课程,如果不理解可以先跳过遗留: APSIX和Kong深入理解openresty 标准lua的协程 ① 早期提供的轻量级协程SDK ngx.thread ngx…...
JavaWeb 学习笔记 7:Filter
JavaWeb 学习笔记 7:Filter 1.快速开始 使用过滤器的方式与 Servlet 类似,要实现一个Filter接口: 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 👉上期速览✈更多精彩请移步主页 Interesting: 📚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种方法
相关系数矩阵(Correlation matrix)是数据分析的基本工具。它们让我们了解不同的变量是如何相互关联的。在Python中,有很多个方法可以计算相关系数矩阵,今天我们来对这些方法进行一个总结 Pandas Pandas的DataFrame对象可以使用c…...
物联网、工业大数据平台 TDengine 与苍穹地理信息平台完成兼容互认证
当前,在政府、军事、城市规划、自然资源管理等领域,企业对地理信息的需求迅速增加,人们需要更有效地管理和分析地理数据,以进行决策和规划。在此背景下,“GIS 基础平台”应运而生,它通常指的是一个地理信息…...
this.$nextTick()的使用场景
事件循环机制: 同步代码执行->查找异步队列,推入执行栈,执行Vue.nextTick[事件循环1]->查找异步队列,推入执行栈,执行Vue.nextTick[事件循环2]->查找异步队列,推入执行栈,执行Vue.nex…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
