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

使用微信小程序需要弹出动态二维码的需求,从插件市场选了一个下载次数较多的组件引入到项目中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.rhkb.cn/news/136289.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java导出Excel合并列(自定义列根据模板进行导出)附详细代码及注解

【版权所有&#xff0c;文章允许转载&#xff0c;但须以链接方式注明源地址&#xff0c;否则追究法律责任】【创作不易&#xff0c;点个赞就是对我最大的支持】 前言 仅作为学习笔记&#xff0c;供大家参考 总结的不错的话&#xff0c;记得点赞收藏关注哦&#xff01; 这里…

DM/达梦数据库查询或更新某一列中多个字典码对应内容

准备工作&#xff08;建表、插入数据&#xff09; 1、建立表格&#xff1a;学生-学习科目表student_study 注意&#xff1a;科目kemu列内容是字典码&#xff0c;需要更换成对应内容。 CREATE TABLE "TEST"."STUDENT_STUDY" ( "NAME" VARCHAR(2…

各种电机驱动原理

步进电机 步进电机参考资料 野火官方文档 步进电机驱动原理 上面参考文档中有的内容就不写了&#xff0c;写一下我自己的总结吧。 说明&#xff1a; 电机驱动器输入信号有电机转动方向信号DIR&#xff0c;电机转速信号PWM&#xff0c;电机使能信号EN&#xff1b;电机驱动器…

安装VS2015时提示安装包丢失或损坏

今天安装VS2015社区版本时&#xff0c;提示缺失以下两个内容&#xff1a; Microsoft VisualStudio JavaScript Project System : 找不到元素。 Microsoft VisualStudio JavaScript Language Service : 系统找不到指定的文件。 虽然似乎不影响C代码的运行&#xff0c;但是我怕有…

计算机网络第四节 数据链路层

一&#xff0c;引入数据链路层的目的 1.目的意义 数据链路层是体系结构中的第二层&#xff1b; 从发送端来讲&#xff0c;物理层可以将数据链路层交付下来的数据&#xff0c;装换成光&#xff0c;电信号发送到传输介质上了 从接收端来讲&#xff0c;物理层能将传输介质的光&…

github 网页显示不全?

问题 解决 1、检查网页&#xff0c;打开 network&#xff0c;重新刷新 github 网页 2、查看无法加载的资源&#xff08;如 css 文件&#xff09; 3、查看域名地址 https://tool.chinaz.com/dns/&#xff0c;github.githubassets.com&#xff08;检查网页元素&#xff0c;点击无…

在Spring Boot API Gateway中实现Sticky Session

文章目录 小结问题在API Gateway中实现Sticky Session在同一个API Gateway中同时支持Sticky Session和RoundRobinLoadBalancer参考 小结 在Kubernetes微服务的云环境中&#xff0c;如何在Spring Boot API Gateway中实现Sticky Session&#xff0c;当服务请求被某一个服务器处理…

2023年7月京东平板电脑行业品牌销售排行榜(京东销售数据分析)

鲸参谋监测的京东平台7月份平板电脑市场销售数据已出炉&#xff01; 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;今年7月份&#xff0c;京东平台上平板电脑的销量为68万&#xff0c;同比增长超过37%&#xff1b;销售额为22亿&#xff0c;同比增长约54%。从价格上看…

win系统环境搭建(四)——Windows安装mysql8压缩包版本

windows环境搭建专栏&#x1f517;点击跳转 win系统环境搭建&#xff08;四&#xff09;——Windows安装mysql8压缩包版本 本系列windows环境搭建开始讲解如何给win系统搭建环境&#xff0c;本人所用系统是腾讯云服务器的Windows Server 2022&#xff0c;你可以理解成就是你用…

mysql知识大全

MySQL知识大全&#xff08;2&#xff09; MySqL 基础为1—7&#xff08;增删改查基础语法&#xff09;&#xff0c;MySQL进阶知识为8—11&#xff08;约束、数据库设计、多表查询、事务&#xff09; 1、数据库相关概念 以前我们做系统&#xff0c;数据持久化的存储采用的是文件…

直线模组的常用语

在工业生产中&#xff0c;直线模组的叫法有很多种&#xff0c;对于新手小白来说&#xff0c;很容易就会被绕晕&#xff0c;今天我们就来简单说一下直线模组的常用称呼吧&#xff01; 1、直线模组&#xff1a;与直线滑台同义&#xff0c;基本可以相互互换。直线模组一般是指可以…

微信小程序隐私授权

微信开发者平台新公告&#xff1a;2023年9月15之后&#xff0c;隐私协议将被启用&#xff0c;所以以后的小程序都要加上隐私协议的内容提示用户&#xff0c; 首先设置好隐私协议的内容&#xff0c;登录小程序的开发者后台&#xff0c;在设置--》服务内容声明--》用户隐私保护指…

【笔试强训选择题】Day44.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff…

阿里云无影云电脑角色AliyunServiceRoleForGws什么意思?

阿里云无影云电脑服务关联角色是指角色名称&#xff1a;AliyunServiceRoleForGws&#xff0c;并赋予角色权限策略&#xff1a;AliyunServiceRolePolicyForGws的过程&#xff0c;简单来说&#xff0c;就是允许无影云电脑服务访问您VPC、CEN和NAS中的资源&#xff0c;使用该权限查…

数据库管理-第105期 安装Database Valut组件(20230919)

数据库管理-第105期 安装Database Valut组件&#xff08;20230919&#xff09; 之前无论是是EXPDP还是PDB中遇到的一些问题&#xff0c;其实都跟数据库的DV&#xff08;Database Valut&#xff09;组件有关&#xff0c;因为目标库没有安装DV导致启动时会出现问题。 1 DV/OLS …

1000K数据在Java中用哪种选型进行存储?

​ 如题&#xff0c;笔者在面试时被考察到该问题&#xff0c;Java中面临这样大的数组&#xff0c;选择ArrayLIst还是LinkedList来进行存储呢&#xff1f; 给出你的依据。 结论&#xff1a;大多数场景下直接使用ArrayList和ArrayDeque即可。 ArrayList和LinkedList均是实现了Lis…

一个React组件:动态递增展示数字特效

在可视化展示界面时有一种场景&#xff0c;就是页面在初始化的时候&#xff0c;有些数字展示想要从某个值开始动态递增到实际值&#xff0c;形成一种动画效果。例如&#xff1a; 写一个数字递增的组件&#xff0c;代码如下&#xff1a; import {useEffect, useRef, useState} f…

升级:远程桌面软件玩游戏指南

你有没有遇到过这样的场景&#xff1a;你想玩一款特定的游戏&#xff0c;但却受到设备功能的限制&#xff1f;这就是游戏远程桌面的概念变得非常宝贵的地方。从本质上讲&#xff0c;它允许您远程利用高端游戏计算机的功能&#xff0c;使您能够在自己的设备上玩游戏。 可以考虑…

14.抽象工厂模式

UML 代码 #include <iostream> #include <list> using namespace std;class AbstractProductA { public:virtual void showa() 0; }; class ProductA1:public AbstractProductA { public:virtual void showa(){cout << "我是A1" << endl;}…

解决npm install遇到的问题:Error while executing:

目录 一、遇到问题 二、解决办法 方法一 方法二 方法三 方法四 一、遇到问题 npm ERR! Error while executing: npm ERR! D:\IT_base\git\Git\cmd\git.EXE ls-remote -h -t ssh://gitgithub.com/sohee-lee7/Squire.git npm ERR! npm ERR! fatal: unable to access ht…