百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

Uniapp|爬坑之真机点击无效 uniapp真机测试请求问题

liuian 2024-12-22 19:34 27 浏览

本人项目在微信小程序里面一直正常,但不管是跑模拟器还是真机,通过运行到手机或模拟器之后。

在使用uni-list的时候没办法正常跳转,比如下面这样的代码:

<uni-list class="plan" v-for="(plan, index) in yesterdayAibhPlansList.plans_list" :key="plan.id">
    <uni-list-item :title="plan.pth_sentence.title" :note="plan.pth_lesson.title"
        :rightText="'创建计划:'+ plan.plan_make_time + '前'" @click="toPracticePage(plan, 'yesterday')" link
        clickable>
    </uni-list-item>
</uni-list>

这里点击后我是希望能够进入Practice页面,但奇怪的是,刚进入真机APP的时候一切正常,但一旦有数据删除、添加的时候,表现就不正常了,有时候首尾可以点击进入下一页面,而中间的不行,有时候只剩下头一个可以点击。而那些无法进入下一页的也不是完全没反应,只是闪了一下,就没有然后了。

一开始以为是自己的key可能写成index(不建议使用index),导致vue不知道更新哪一个。但自己用的全是数据库中的id号,这绝对是唯一的,不可能重复。如上图中的plan.id。

尝试了改为click改为tap,现象一致。而且看网上的文章,tap还容易出现二次点击的毛病。

又觉得可能是数据更新有毛病,专门添加了forceUpdate,而且只在APP平台中有效:

// #ifdef APP-VUE|| APP || APP-NVUE || APP-PLUS
console.log("force update");
self.$forceUpdate()
// #endif

但一切照旧,郁闷了两天后我发现了click的一个选项:native。这个选项来自于vue, 看官方文档讲得很抽象,没搞懂,研究后发现网上的说法比较多,在多次试验后发现,下面的解释比较靠谱,即:

给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符),等同于在自定义组件中,子组件内部处理click事件然后向外发送click事件:$emit("click".fn),也就是说有了native才会让子组件真正的监控到click事件,而且极可能是个内部的bug,只不过使用native之后可以解决问题,因为在uniapp里面是真机测试的时候才需要加上native, 而小程序里面并不需要!

所以我的理解是:uni-list-item这个子组件,想要正常地触发click,需要添加上native,这样点击此组件的时候,click事件才会正确的传递进去!进而再调用父组件的click方法,看下图我的试验。

点击有反应的解决办法

<uni-list class="plan" v-for="(plan, index) in todayAibhPlansList" :key="plan.id">
    <uni-list-item :title="plan.pth_sentence.title" :note="plan.pth_lesson.title"
        :rightText="'创建计划:'+ plan.plan_make_time + '前 '" @click.native="toPracticePage(plan, 'today')" link
        clickable>
    </uni-list-item>
</uni-list>

即用@click.native, 注意不能是@tap.native,这个我已经测试过了,无效。

添加native之后,微信小程序也是正常的!

另外,还有一种情况点击后无反应。

点击后页面没有跳转

点击无反应也可能是你的页面没有跳转

你是否在Navigate中使用的是tabbar页面?同样微信小程序可以跳,但真机不行,这个在官方文档里面有说明: https://uniapp.dcloud.io/api/router?id=navigateto

这时候,你应该使用的是uni.switchTab,点击的后真机就可以跳转了。(类似这种事,官方其实给出个警告,结果啥提示也没有)

toUserPage() {
    uni.switchTab({
        url: '/pages/user/user'
    })
},

还是不行的话,检测下自己有没有正确的使用组件,比如:

uni-list-item点击后不跳转

uni-list-item点击无效,看有没有添加link或者clickable,有这两个就能够触发点击事件了。

<uni-list class="practice" v-for="(practice, index) in latestPracticesList" :key="practice.id">
    <uni-list-item :thumb="index | toPNG" :title="practice.pth_sentence.title"
        :note="'课程:'+practice.pth_lesson.title" :rightText="practice.created_at + '前'"
        @tap="toPracticePage(practice)" link clickable>
    </uni-list-item>
</uni-list>

可以看看uni-list-item中关于onClick的源代码,也就是link, clickable任一项都会触发父组件传递的click事件。

onClick() {
    if (this.to !== '') {
        this.openPage();
        return;
    }
    if (this.clickable || this.link) {
        this.$emit('click', {
            data: {}
        });
    }
},

同样的,这个现象小程序里面可能没有,但真机里面就是不会跳转,你说让人晕不晕。

总结

虽然此问题在uni-list里面出现,但当你使用自定义组件的时候,也可能会遇到点击后没反应的情况,此时试下@click.native

uniapp坑确实挺多的,但感觉主要还是各种平台造成的,浏览器,PC,真机,还有各种小程序环境其实都不一致,手机平台也分苹果、安卓两大类。所以我还是在坚持用uniapp,毕竟排除了小坑,其它表现真的是挺一致的。

我是@爱玩的安哥,关注我获取更多有用知识


相关推荐

快速上手maven

Maven的作用在开发过程中需要用到各种各样的jar包,查找和下载这些jar包是件费时费力的事,特别是英文官方网站,可以将Maven看成一个整合了所有开源jar包的合集,我们需要jar包只需要从Mav...

Windows系统——配置java环境变量

怎么配置java环境变量呢?首先是安装好jdk然后我的电脑右键选择属性然后选择左侧高级系统设置高级然后点环境变量然后在用户变量或系统变量中配置,用户变量指的是只有当前用户可用,系统变量指的是系统中...

ollama本地部署更改默认C盘,Windows配置环境变量方法

ollama是一个大语言模型(LLM——LargeLanguageModel),本地电脑安装网上也要很多教程,看上去非常简单,一直下一步,然后直接就可以使用了。但是我在实操的时候并不是这样,安装完...

# Windows 环境变量 Path 显示样式更改

#怎样学习Java##Windows环境变量Path显示样式更改##1、传统Path环境变量显示:```---》键盘上按【WIN+I】打开系统【设置】---》依次点击---》【系统...

如何在Windows中创建用户和系统环境变量

在Windows中创建环境变量之前您应该了解的事情在按照本指南中所示的任何步骤创建指向文件夹、文件或其他任何内容的用户和系统变量之前,您应该了解两件事。第一个也是最重要的一个是了解什么是环境变量。...

Windows 中的环境变量是什么?

Windows中的环境变量是什么?那么,Windows中的环境变量是什么?简而言之,环境变量是描述应用程序和程序运行环境的变量。所有类型的程序都使用环境变量来回答以下问题:我安装的计算机的名称是什么...

【Python程序开发系列】谈一谈Windows环境变量:系统和用户变量

这是我的第350篇原创文章。一、引言环境变量(environmentvariables)一般是指在操作系统中用来指定操作系统运行环境的一些参数,如:临时文件夹位置和系统文件夹位置等。环境变量是在操作...

系统小技巧:还原Windows10路径环境变量

有时,我们在Windows10的“运行”窗口中执行一些命令或运行一些程序,这时即便没有指定程序的具体路径,只输入程序的名称(如notepad.exe),便可以迅速调用成功。这是因为Windows默认...

Windows10系统的“环境变量”在哪里呢?

当我们在操作系统是Windows10的电脑里安装了一些软件,要通过配置环境变量才能使用软件时,在哪里能找到“环境变量”窗口呢?可以按照下面的步骤找到“环境变量”。说明:下面的步骤和截图是在Window...

系统小技巧:彻底弄懂Windows 10环境变量

每当我们进行系统清理时,清理软件总能自动找到Windows的临时文件夹之所在,然后加以清理,即便是我们重定向了TEMP目录也是如此。究其原因,是因为清理软件会根据TEMP环境变量来判断现有临时文件夹的...

MySQL 5.7 新特性大全和未来展望

本文转自微信公众号:高可用架构作者:杨尚刚引用美图公司数据库高级DBA,负责美图后端数据存储平台建设和架构设计。前新浪高级数据库工程师,负责新浪微博核心数据库架构改造优化,以及数据库相关的服务器存...

MySQL系列-源码编译安装(v8.0.25)

一、前言生产环境建议使用二进制安装法,其优点是部署简单、快速、方便,并且相对"yum/rpm安装"方法能更方便地自定义文件存放的目录结构,方便用脚本批量部署,方便日后运维管理。在生产...

MySQL如何实时同步数据到ES?试试这款阿里开源的神器!

前几天在网上冲浪的时候发现了一个比较成熟的开源中间件——Canal。在了解了它的工作原理和使用场景后,顿时产生了浓厚的兴趣。今天,就让我们跟随我的脚步,一起来揭开它神秘的面纱吧。简介canal翻译为...

技术老兵十年专攻MySQL:编写了763页核心总结,90%MySQL问题全解

MySQL是开放源码的关系数据库管理系统,由于性能高、成本低、可靠性好,成为现在最流行的开源数据库。MySQL学习指南笔记领取方式:关注、转发后私信小编【111】即可免费获得《MySQL进阶笔记》的...

Mysql和Hive之间通过Sqoop进行数据同步

文章回顾理论大数据框架原理简介大数据发展历程及技术选型实践搭建大数据运行环境之一搭建大数据运行环境之二本地MAC环境配置CPU数和内存大小查看CPU数sysctl machdep.cpu...