uqrcode+uni-app 微信小程序生成二维码

news2024/11/25 11:29:22

使用微信小程序需要弹出动态二维码的需求,从插件市场选了一个下载次数较多的组件引入到项目中uqrcode,使用步骤如下:

1、从插件市场下载

插件地址:https://ext.dcloud.net.cn/plugin?id=1287,若你是跟我一样是用uni-app开发微信小程序的,则该插件的介绍只需要看下面的即可,上面是作者介绍用于原生开发中。

2、引入

下载好后,按照下面方式引入

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>

上述是二维码的内容, 我是写在popup

<uni-popup id="popupQrcode" ref="popupQrcode" type="center" :animation="true">
	<uqrcode ref="uqrcodepop" canvas-id="qrcode" :value="qrcodeUrl" :options="{ margin: 10 }" :size="300"
				:loading="qrcodeLoading" @complete="qrchange($event)"></uqrcode>
</uni-popup>

(按照自己的需要引入即可)

下图是关于uni-app使用的关键部分:
在这里插入图片描述
注意:若微信开发者工具提示 uqrcode is undefined 类似这样子的错误提示,需要重启开发者工具,或者停止运行再重新启动,重启后便没有该错误提示了。

3、文档

除了简单使用之外,若有进一步要求,比如显示loading、二维码大小、重新生成二维码、点击事件、下载保存等需求,可在此基础上添加事件和方法即可,文档地址:https://uqrcode.cn/doc/document/uni-app.html

qrchange(e) {
	if (e.success) {
		console.log('生成成功');
		_this.qrcodeLoading = false;
    } else {
	   console.log('生成失败');
	   _this.qrcodeLoading = false;
    } 
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1024113.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用PHP异步协程控制python爬虫脚本,实现多协程分布式爬取

背景 公司需要爬取指定网站的产品数据。但是个人对python的多进程和协程不是特别熟悉。所以&#xff0c;想通过php异步协程&#xff0c;发起爬取url请求控制python爬虫脚本&#xff0c;达到分布式爬取的效果。 准备 1.准备一个mongodb数据库用于存放爬取数据2.引入flask包&a…

Cesium 生成点位坐标

文章目录 需求分析1. 点击坐标点实现2. 输入坐标实现 需求 用 Cesium 生成点位坐标&#xff0c;并明显标识 分析 以下是我的两种实现方式 第一种是坐标点击实现 第二种是输入坐标实现 1. 点击坐标点实现 //点位坐标getLocation() {this.hoverIndex 0;let that this;this.view…

【FAQ】安防视频监控平台EasyNVR无法控制云台,该如何解决?

TSINGSEE青犀视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入&#xff0c;并能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。在智慧安防等视频监控场景中&#xff0c;EasyNVR可提供视频实时监控直播、云端…

网络代理工具软件Proxyman mac中文版功能特点

Proxyman mac是一款网络代理工具软件&#xff0c;适用于Mac和iOS平台。它可以帮助开发人员、测试人员和网络管理员监控和调试网络流量。 Proxyman mac软件功能和特点 流量捕获和监控&#xff1a;Proxyman可以捕获并显示设备上的所有网络流量&#xff0c;包括HTTP、HTTps和WebSo…

Android之MediaCodec::PostAndAwaitResponse消息原理(四十三)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…

vscode自动添加文件和函数注释

自动添加注释 Doxygen Documentation Generator配置配置选项介绍配置文件头注释配置函数头注释 Doxygen Documentation Generator 此插件是vscode自动注释添加的插件&#xff0c;首先需要在vscode中查找并安装插件。如下图所示&#xff0c;插件在未安装的情况下会显示蓝色的In…

go-redis 框架基本使用

文章目录 redis使用场景下载框架和连接redis1. 安装go-redis2. 连接redis 字符串操作有序集合操作流水线事务1. 普通事务2. Watch redis使用场景 缓存系统&#xff0c;减轻主数据库&#xff08;MySQL&#xff09;的压力。计数场景&#xff0c;比如微博、抖音中的关注数和粉丝数…

【zotero】解决换新电脑后PDF打不开

关于zoteroPDF无法打开&#xff0c;并且提示&#xff1a;它可能已被移动或删除到 Zotero 之外&#xff0c;或者一台计算机上的链接附件基本目录可能设置不正确。 第一步&#xff1a;下载zutilo第二步&#xff1a;zutilo获取路径第三步 修改路径最后&#xff1a;新旧路径对比 第…

笔记1.6:计算机网络发展历史

1961-1972&#xff1a;早期分组交换原理的提出与应用 1972-1980&#xff1a;网络互连&#xff0c;大量新型、私有网络的涌现 1980-1990&#xff1a;新型网络协议与网络的激增 1999、2000‘s&#xff1a;商业化、Web、新应用 2005- &#xff1f; &#xff1a;

ChatGPT AIGC 完成各省份销售动态可视化分析

像这样的动态可视化由人工智能ChatGPT AIGC结合前端可视化技术就可以实现。 Prompt:请使用HTML,JS,Echarts 做一个可视化分析的案例,地图可视化,数据可以随机生成,请写出完整的代码 完整代码复制如下: <!DOCTYPE html> <html> <head><meta char…

汽油辛烷值的测定 马达法

声明 本文是学习GB-T 503-2016 汽油辛烷值的测定 马达法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 8 试剂和标准物 8.1 气缸夹套冷却液 若实验室所处海拔的水沸点为100℃1.5℃(212 F3F), 应使用水作为气缸夹套冷却液。当 实验室海拔高度不确定…

Android 滑动事件消费监控,Debug 环境下通用思路

Android Debug 环境下滑动事件消费监控通用思路 背景 Android 开发中&#xff0c;经常会遇到滑动事件冲突。在一些简单的场景下&#xff0c;我们如果能够知道是那个 View 拦截了事件&#xff0c;那我们能够很容易得解决。解决方法通常就是内部拦截法或者外部拦截法。ViewPage…

「深度学习之优化算法」(十九)蚁狮算法

1. 蚁狮算法简介 (以下描述,均不是学术用语,仅供大家快乐的阅读)    蚁狮是一种昆虫,城里长大的我没有见过这玩意儿,请教了农村长大小的伙伴,依然没见过,这玩意儿可能在我们生活的地方分布较少。 (图片及介绍来自百度百科)    蚁狮算法(Ant Lion Optimization…

自己动手写数据库:关系代数和查询树执行效率的推导

上几节我们完成了 sql 解释器的实现。通过解析 sql 语句&#xff0c;我们能知道 sql 语句想做什么&#xff0c;接下来就需要执行 sql 语句的意图&#xff0c;也就是从给定表中抽取所所需要的数据。要执行 sql 语句&#xff0c;我们需要了解所谓的“关系代数”&#xff0c;所谓代…

py基础语法

输出&#xff1a; print("wbshpnshp")输入&#xff1a; 1.raw_input() str raw_input("请输入&#xff1a;") print "你输入的内容是: ", str2.input(), input 可以接收一个Python表达式作为输入&#xff0c;并将运算结果返回。 str input(…

【C++面向对象侯捷】3.构造函数

文章目录 class 的声明inline&#xff08;内联&#xff09;函数access level&#xff08;访问级别&#xff09;构造函数构造函数可以有多个- 重载&#xff01; class 的声明 inline&#xff08;内联&#xff09;函数 access level&#xff08;访问级别&#xff09; 构造函数 构…

Flutter的基础知识、核心概念以及一些实际开发技巧

Flutter的基础知识、核心概念以及一些实际开发技巧 前言深入探讨Flutter应用程序开发一、什么是Flutter&#xff1f;Dart编程语言Widget组件模型 二、Flutter的核心概念MaterialApp和ScaffoldWidget生命周期布局和排列状态管理 三、实际开发技巧使用Hot Reload适应不同屏幕尺寸…

OpenHarmony AI框架开发指导

一、概述 1、功能简介 AI 业务子系统是 OpenHarmony 提供原生的分布式 AI 能力的子系统。AI 业务子系统提供了统一的 AI 引擎框架&#xff0c;实现算法能力快速插件化集成。 AI 引擎框架主要包含插件管理、模块管理和通信管理模块&#xff0c;完成对 AI 算法能力的生命周期管理…

用katalon解决接口/自动化测试拦路虎--参数化

不管是做接口测试还是做自动化测试&#xff0c;参数化肯定是一个绕不过去的坎。 因为我们要考虑到多个接口都使用相同参数的问题。所以&#xff0c;本文将讲述一下katalon是如何进行参数化的。 全局变量 右侧菜单栏中打开profile&#xff0c;点击default&#xff0c;打开之后…

微信小程序实现删除功能

1. 前端 项目列表展示是使用的wx&#xff1a;for遍历 每个项目展示有3个模块 1. project-title 2. project-content 3. project-foot 全部代码如下 <t-sticky><view class"search"><t-search model:value"{{conditions.keyword}}" pl…