uniapp console没内容也没报错

已于 2024-01-27 17:18:20 修改
阅读量819 收藏 7
点赞数 11
文章标签： uni-app javascript 前端
于 2024-01-09 10:44:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44294359/article/details/135474538
版权
本文解释了Vue3中ref(null)可能导致的问题，即当未使用test.value更新值时，ref会尝试寻找DOM元素但可能找不到，导致输出问题。作者建议在HBuilderX手机模拟器的检查元素功能中查看输出，因为某些值如null或undefined可能在默认控制台中无法显示。
摘要由CSDN通过智能技术生成

后面发现是因为输出的变量中有使用ref(null)来设置初始化。
由于vue3中，const test = ref(null)会当后续没使用test.value重设置内容时，会自动的去找dom元素ref=test的引用，输出的时候找不到该元素，所以导致在console中输出不了。
我是使用hbuilderx开发，建议在手机模拟器的控制台查看输出，因为hbuilderx自带的控制台，有很多值是输出不了的，例如当值为null或者undefined的时候。
在手机模拟器中右击->检查元素就行了

烂不烂问厨房
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app——Hbuildx 自定义console.log的快捷键
qq_43201350的博客
10-11 1786
工具——>代码块设置——>javascript 代码块 中可修改快捷键 默认是输入 “clog” 在右边输入 { "console.log": { "prefix": "log", "body": [ "console.log();" ], "triggerAssist": false, "description": "Log output to console twice" } } 如图 设置后只要输入 “log” 就会出来 "console.log"
uniapp读取exlsx文件内容
12-26
本篇文章将详细探讨如何在uniapp中读取Excel文件，特别是xlsx格式的文件内容。 首先，我们需要了解xlsx文件的结构。xlsx是Microsoft Office Excel 2007及更高版本使用的文件格式，基于Open XML标准。它是由一系列...
uniapp去除console.log()
SunPeng的博客
10-23 5672
uniapp去除console.log()
uni-app运行到安卓模拟器白屏问题
最新发布
by_Ftao的博客
06-28 366
1.如果是首次加载白屏,二次编译正常的情况,可能是pages.json里设置的第一项(应用启动页)有问题,可以更换测试下.如果出现如上情况,建议升级下HBuilderX版本后再启动App]2.cpu模式选择不对,uni-app官网给出的说明;3.出现SDK与cli版本不匹配。
uniapp小程序console.log在微信开发者工具中不打印问题
fighting ~的博客
08-02 5366
最近在开发一款uniapp小程序，发现console.log在微信开发者工具中不打印，但在H5页面就能够有打印输出，于是在网上寻找原因…，然后将项目重新运行到微信开发者工具中就可以在控制台看到打印输出啦。将compress.drop_console由。
使用uniapp写小程序，真机调试的时候不显示log
weixin_52406641的博客
11-16 1334
当小程序文件太大的情况下使用真机调试，但是真机调试的调试器没有任何反应。
HBuilder X运行uniapp之app真机调试控制台console不打印，多种原因分析解决，亲测有效
qq_42961150的博客
10-26 1万+
本描述属于本人亲身经历，亲测有效。公司的APP从开发到维护都是我在负责，所以对遇到的问题都会一一记录下来。就在最近在修改一个功能的时候，运行app到手机上，突然发现hbuilderX的控制台不打印了，这肯定就没法进行调试，作为一名前端人员，你懂的。那么接下来我就简单说说我的解决思路： 方案一： 首先遇到问题的第一反应就是重新打开手机USB调试和选择USB配置为MTP（多媒体传输），之前我遇到这个问题的时候，确实这个办法有效果。所以大家在遇到的时候，可以先这样试一下。但是这次遇到的问题不是这个原因。 方案二：
uni-app-console
huxihua2006的博客
08-23 2691
如何使用微信开发者工具？ 一，先下载 HBuilder工具中运行微信开发工具 二、微信开发工具 在微信开发工具中有个调试器可以查看console相关日志信息。 ...
uniapp解决文件及图片下载预览
10-24
在uniapp开发中，处理文件和图片的下载与预览是一项常见的需求。uniapp是一个基于Vue.js的多端开发框架，能够便捷地构建H5、小程序、App等应用。本篇将详细介绍如何在uniapp中实现文件和图片的下载与预览功能。 一...
uniapp 同步方法 实例代码
04-19
在开发uniapp应用时，经常会遇到需要在应用启动或页面加载时执行一些初始化操作的情况。这些操作如果不能及时完成，可能会导致页面加载延迟或者功能不正常。标题提到的"uniapp 同步方法 实例代码"是针对这个问题的一...
uniapp 开发原生插件
02-24
同时，原生插件也能帮助开发者解决部分H5无法很好支持的复杂场景，例如推送通知、地图导航等。在实际开发中，根据项目需求灵活选择原生插件和uniapp内置组件的结合，是uniapp项目性能优化的重要策略之一。
uniapp +上传文件+安卓、ios文件选择
12-22
在开发跨平台应用时，uniapp是一个非常受欢迎的框架，它允许开发者用一套代码同时构建Android、iOS和Web应用。本教程将详细讲解如何在uniapp中实现文件上传功能，特别是针对Android和iOS设备，以及如何处理不同类型...
console.log 无反应，不输出了
weixin_42617800的博客
02-27 1万+
1. F12 2. 点三个点 3. 4、 恢复默认值并重新加载 （具体原因不明，先解决了问题再说，没空解释）
uni-app vue angular 全局取消console.log
qq_36557846的博客
03-24 2053
main.js配置 //不显示console.log if (uni.getSystemInfoSync().platform !== "devtools") { console.log = () => {} }
uniapp使用VConsole调试工具
qq_36158551的博客
03-08 5824
uniapp使用VConsole调试工具
uni-app动态开启VConsole控制台调试，太方便了！
南吕政的博客
02-03 7076
来控制调试面板的初始化，接收并在本地缓存参数动态控制调试模式的启停用，缺省时默认不开启。使用 uni-app 开发 h5 应用有时需要排查线上发生的问题。的开关，关闭需要注掉代码后重新打包发布，比较繁琐且不够灵活。全局显示则需要在程序入口文件 App.vue 中进行初始化。如果想单页面启用调试则只需要在页面的。方法比较简单，就是增加一个参数例如。会在 H5 页面上一直显示。加载回调中添加初始化。
uni-app生产环境去掉console
热门推荐
qq_45780380的博客
02-25 1万+
uni-app生产环境去掉console 运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）。 我们就可以采用这个方式把console.log变为一个空函数 if (uni.getS
uni-app 全局去除console.log
除了能写一堆BUG你还能干什么？
04-26 609
写在app.vue onLaunch函数里。
uniapp``报错
07-28
在Uniapp中，由于event对象并非浏览器的event对象，所以不支持stopPropagation方法。因此，无法直接使用@click.stop来阻止事件冒泡。\[2\]如果你希望在点击icon时不触发父级的点击事件，可以考虑以下解决方案： 1. 在icon的点击事件处理函数中，手动调用event.stopPropagation()方法来阻止事件冒泡。例如： ``` <template> <view @click="parentClick"> <u-icon @click="iconClick"></u-icon> </view> </template> <script> export default { methods: { parentClick() { console.log('父级点击事件'); }, iconClick(event) { event.stopPropagation(); console.log('icon点击事件'); } } } </script> ``` 2. 如果你希望在点击icon时不仅阻止事件冒泡，还要阻止父级的点击事件，可以在父级的点击事件处理函数中添加一个判断条件，只有当事件的target不是icon时才执行相应的逻辑。例如： ``` <template> <view @click="parentClick"> <u-icon @click="iconClick"></u-icon> </view> </template> <script> export default { methods: { parentClick(event) { if (event.target.tagName !== 'U-ICON') { console.log('父级点击事件'); } }, iconClick() { console.log('icon点击事件'); } } } </script> ``` 通过以上两种方式，你可以在Uniapp中实现在点击icon时不触发父级的点击事件。 #### 引用[.reference_title] - *1* *2* [uniapp 报错之 uview 中 u-icon 点击 阻止冒泡 @click.stop 报错](https://blog.csdn.net/YZRHANYU/article/details/127961460)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值