uniapp编写微信小程序遇到的坑总结

news2024/11/17 23:57:31

1、阻止事件冒泡

使用uniapp开发微信小程序的时候,发现使用@click.stop来阻止事件冒泡没有作用,点击了之后发现仍然会触发父组件或者祖先组件的事件。
在这里插入图片描述
在网上查阅,发现使用@tap.stop才能阻止事件冒泡。
在这里插入图片描述

2、二维码生成

在网上找了很多,发现很多都不行(也有可能是代码没写对),最后是在uniapp的插件市场下载uQRcode插件,根据给出的案例,才完美解决了。
下面给处教程:
插件下载地址: uqrcode

1、 选中全部,搜索 “uqrcode”
在这里插入图片描述
2、选中如下插件

如果不是选中的同一个插件,点进入之后可以根据里面的教程案例编写代码,我将已这个插件为案例
在这里插入图片描述
3、下载压缩包

下载压缩包,解压后找到uqrcode.js文件,根据自己项目,复制到项目下。(我的是放在src/utils下的)
在这里插入图片描述

4、使用uqrcode.js

<template>
	<view >	
		<view >
				<canvas id="qrcode" ref="qrcode" canvas-id="qrcode"
					:style="{width:`${qrcodeSize}px`, height: `${qrcodeSize}px`}"></canvas>
			</view>	
	</view>
</template>


<script>
	import uQRCode from "@/utils/uqrcode.js"

	export default {
		data() {
			return {
				qrcodeSize: 160,
				text:'eoruw20230528'
			}
		},
		mounted(){
			this.getQRcodeHandle()
		},
		methods: {
			// 获取二维码
			getQRcodeHandle() {
						uni.showLoading({
							title: '二维码生成中',
							mask: true
						})
						uQRCode.make({
							canvasId: 'qrcode',
							text: this.text,//二维码内容
							size: this.qrcodeSize,
							margin: 10,
							success: res => {
								console.log('qrcodeSrc = ' + res);
							},
							complete: () => {
								uni.hideLoading()
							}
						})
			},
		},
	}
</script>



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

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

相关文章

【进程与线程】最好懂的讲解

目录 1.CPU的管理 2.进程 2.1.概述 2.2.数据结构 2.3.进程状态 2.4.进程与内存 2.5.PCB队列 3.线程 3.1.概述 3.2.实现 1.CPU的管理 进程和线程是操作系统里面的概念&#xff0c;这个概念其实是对CPU的管理策略。整个操作系统都可以看作计算机硬件的管理软件&#x…

git本地选项配置

一&#xff0c;简介 在git工具安装完成之后&#xff0c;需要设置一下常用的配置&#xff0c;如邮箱&#xff0c;缩写&#xff0c;以及git commit模板等等。本文就来详细介绍些各个配置如何操作&#xff0c;供参考。 二&#xff0c;配置步骤 2.1 查看当前git的配置 git conf…

JVM性能分析-jstat工具观察gc频率

jstat jstat是java自带的工具&#xff0c;在bin目录下 用法 语法&#xff1a;jstat -<option> [-t] [-h<lines>] <vmid> [<interval> [<count>]] [kqkyyj-2 bin]$ jstat -help Usage: jstat -help|-optionsjstat -<option> [-t] [-h&l…

C++ 面向对象三大特性——继承

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;C 继承 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;面向对象三大特性的&#xff0c;封装&#xff0c;继承&#xff0c;多态&#xff…

官网下载安装达芬奇18.5详细步骤

目录 一、介绍 &#xff08;一&#xff09;特色功能介绍 &#xff08;二&#xff09;版本介绍 二、下载安装教程 &#xff08;一&#xff09;达芬奇官网下载 &#xff08;二&#xff09;安装 一、介绍 &#xff08;一&#xff09;特色功能介绍 以下是达芬奇视频剪辑软件…

【UE4 RTS】11-HUD functionality Part1

前言 本篇实现了将游戏状态中的游戏时间和游戏日期通过蓝图接口的方式传递给控件蓝图&#xff0c;并且正确显示&#xff0c;另外还实现了控件蓝图界面上切换12小时和24小时制的游戏时间显示方式。 效果 步骤 一、显示游戏日期 1. 打开蓝图接口“RTS_GameTime_IF” 添加一个…

回声消除-卡尔曼滤波

卡尔曼滤波 卡尔曼滤波的设计过程中需要定义两个变量&#xff0c;一个是状态量&#xff0c;另一个是观测量 状态量 状态量是跟踪目标。将状态量记作 x n \mathbf{x}_n xn​&#xff0c;状态量的协方差矩阵记作 P n \mathbf{P}_n Pn​&#xff0c;可以由前一个时刻的状态&…

视频集中存储/云存储/磁盘阵列EasyCVR平台接入RTSP设备出现离线情况的排查

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

20天部署,支持每天上百家门店咖啡物料配送,顺丰供应链是这样做到的

走进顺丰供应链华北智能仓&#xff0c;映入眼帘是多台自如穿梭的智能搬运机器人和自动高效的分拣设备。1200平米内&#xff0c;拆零输入、分货、按订单取出……通过自动化解决方案&#xff0c;作业效率大幅提升。 这是顺丰供应链与全球仓储机器人引领者极智嘉(Geek)的又一次智…

如何快速搭建app自动化环境编写用例?

使用Airtest 作为测试开发工程师&#xff0c;快速搭建app自动化环境并编写用例可以使用Airtest解决方案来实现。Airtest是一款基于Python的全平台UI自动化测试框架&#xff0c;支持多种移动设备和模拟器&#xff0c;同时集成了丰富的图像识别和手势操作功能。 以下是使用Airt…

有理数思维导图怎么画?这种方法绘制很方便

有理数思维导图怎么画&#xff1f;为什么要绘制思维导图&#xff1f;因为它可以帮助我们更好地组织和理解信息。在数学中&#xff0c;绘制有理数思维导图也可以帮助我们更好地理解有理数的概念和性质。 有理数是我们日常生活中经常接触到的数学概念&#xff0c;包括正整数、负整…

动态内存分配及管理——C语言

目录 一、为什么存在动态内存分配 二、动态内存函数介绍 2.1 malloc 2.2 free 2.3 calloc 2.4 realloc 三、常见的动态内存错误 3.1 对NULL指针的解引用操作 3.2 对动态开辟空间的越界访问 3.3 对非动态开辟内存使用free释放 3.4 使用free释放一块动态开辟内存的一部…

AUTOSAR NvM协议栈集成方法

一、涉及的模块 Bsw&#xff1a;NvM、MemIf、Fee、Crc Mcal&#xff1a;Fls 其中一些芯片厂商的MCAL也会提供Fee模块&#xff0c;本文选择使用ETAS提供的Fee模块&#xff0c;好处是Fee的Block不需要手动配&#xff0c;在NvM中配好了Block之后&#xff0c;生成Bsw代码的同时会…

c语言——查找特定字符在字符串中出现的次数

fgets 函数用于从标准输入&#xff08;stdin&#xff09;中读取一行字符串&#xff0c; 并将其存储在指定的字符数组 str 中。 sizeof str/sizeof str[0] 是用来计算字符数组 str 的大小。 这个表达式计算的结果是字符数组 str 可以容纳的元素个数&#xff08;包括…

linux vscode 下开发

linux vscode 下开发 javajdk插件 java jdk 各种JAVA JDK的镜像分发 编程宝库 - 技术改变世界 jdk 镜像 ubuntu22.04 安装 # Linux x64 64位 jdk-8u351-linux-x64.tar.gztar -zxf jdk-8u351-linux-x64.tar.gz mv jdk1.8.0_351 jdk8/ vim ~/.profile expo…

KEY接口ESD静电保护器件:DW05D5BC-B-E和DW05MS-S

静电在我们日常生活中&#xff0c;可谓是无处不在&#xff0c;我们身上和周围环境就带有很高的静电电压。都知道&#xff0c;ESD静电放电会对电子设备带来威胁甚至损坏。为此&#xff0c;电子设备中按键部位、接口部位以及触摸屏等防静电保护措施是非常有必要的。针对按键KEY接…

Java网络编程(一)网络基础

概述 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统、网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递 网络分类 局域网(LAN) 局域网是一种在小区域内使用的,由多台计算机组成的网络,覆盖范围…

如何使用Python获取SAP Temporary key 临时密钥

什么是Sap 临时密钥&#xff1f; SAP 临时密钥是用于激活 SAP 软件的一种许可证&#xff0c;只能在有限的时间内使用。这些密钥可用于评估目的或在系统迁移期间使用。它们是临时解决方案&#xff0c;通常在一定时间后过期。 如何获取Sap Temporary keys? 临时密钥: 如果创建…

Web网页浏览器远程访问jupyter notebook服务器【内网穿透】

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…

【仿写tomcat】五、响应静态资源(访问html页面)、路由支持以及多线程改进

访问html页面 如果我们想访问html页面其实就是将本地的html文件以流的方式响应给前端即可&#xff0c;下面我们对HttpResponseServlet这个类做一些改造 package com.tomcatServer.domain;import com.tomcatServer.utils.ScanUtil;import java.io.IOException; import java.io…