uni-app学习记录

uni-app官网学习记录

uni-app注意点记录

  1. 页面跳转注意事项

    • navigateTo, redirectTo 只能打开非 tabBar 页面。
    • switchTab 只能打开 tabBar 页面。
    • reLaunch`` 可以打开任意页面。
    • 不能在首页 onReady 之前进行页面跳转。
  2. 页面通讯

	// 发起页面uni.$emit('update',{msg:'页面更新'})// 接收页面uni.$on('update',function(data){console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);})// 接收页面(事件只触发一次)uni.$once('update',function(data){console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);})// 如果没有提供参数,则移除所有的事件监听器;//如果只提供了事件,则移除该事件所有的监听器;//如果同时提供了事件与回调,则只移除这个回调的监听器;//提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;/* uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听 */uni.$off('add', callBack)

官方示例:
在这里插入图片描述

  1. 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,在App平台可以使用 plus.runtime.openURL或web-view组件;H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。
  2. 页面的生命周期onPageScroll:onPageScroll里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿。(uvue在app端无此限制)
  3. getApp() 函数用于获取当前应用实例,一般用于获取全局变量globalData。也可通过应用实例调用 App.vue methods 中定义的方法。
  4. 页面返回时会自动关闭 loading 及 toast, modal 及 actionSheet 不会自动关闭。
  5. 页面关闭时,只是销毁了页面实例,未完成的网络请求、计时器等副作用需开发者自行处理。

页面加载时序介绍

接下来我们介绍onLoad、onReady、onShow的先后关系,页面加载的详细流程。

  1. uni-app框架,首先根据pages.json的配置,创建页面
    所以原生导航栏是最快显示的。页面背景色也应该在这里配置。

  2. 根据页面template里的组件,创建dom。
    这里的dom创建仅包含第一批处理的静态dom。对于通过js/uts更新data然后通过v-for再创建的列表数据,不在第一批处理。

要注意一个页面静态dom元素过多,会影响页面加载速度。在uni-app x Android版本上,可能会阻碍页面进入的转场动画。 因为此时,页面转场动画还没有启动。

  1. 触发onLoad
    此时页面还未显示,没有开始进入的转场动画,页面dom还不存在。

所以这里不能直接操作dom(可以修改data,因为vue框架会等待dom准备后再更新界面);在 app-uvue 中获取当前的activity拿到的是老页面的activity,只能通过页面栈获取activity。

onLoad比较适合的操作是:接受上页的参数,联网取数据,更新data。

手机都是多核的,uni.request或云开发联网,在子线程运行,不会干扰UI线程的入场动画,并行处理可以更快的拿到数据、渲染界面。

但onLoad里不适合进行大量同步耗时运算,因为此时转场动画还没开始。

尤其uni-app x 在 Android上,onLoad里的代码(除了联网和加载图片)默认是在UI线程运行的,大量同步耗时计算很容易卡住页面动画不启动。除非开发者显式指定在其他线程运行。

  1. 转场动画开始
    新页面开始进入的转场动画,动画默认耗时300ms,可以在路由API中调节时长。

  2. 页面onReady
    第2步创建dom是虚拟dom,dom创建后需要经历一段时间,UI层才能完成了页面上真实元素的创建,即触发了onReady。

onReady后,页面元素就可以自由操作了,比如ref获取节点。同时首批界面也渲染了。

注意:onReady和转场动画开始、结束之间,没有必然的先后顺序,完全取决于dom的数量和复杂度。

如果元素排版和渲染够快,转场动画刚开始就渲染好了;

大多情况下,转场动画走几格就看到了首批渲染内容;

如果元素排版和渲染过慢,转场动画结束都没有内容,就会造成白屏。

联网进程从onLoad起就在异步获取数据更新data,如果服务器速度够快,第二批数据也可能在转场动画结束前渲染。

  1. 转场动画结束
    再次强调,5和6的先后顺序不一定,取决于首批dom渲染的速度。

页面加载常见问题

了解了页面加载时序原理,我们就知道如何避免页面加载常见的问题:

  • 优化白屏的方法:
    1、页面dom太多,注意有的组件写的不好,会拖累整体页面。uni-app x 里减少dom数量的策略
    2、联网不要在onReady里,那样太慢了,在onLoad里早点联网获取数据;
    3、在pages.json里配置原生导航栏和背景色
    4、有的页面template内容非常少,整页就是一个需要联网加载的列表,这会造成虽然首批dom飞快渲染了,但页面其实还是白的,联网后才能显示字和图。 此时需要在template里做一些简单占位组件,比如loading组件、骨架屏,让本地先显示一些内容。

  • 卡住动画不启动的原因:

1、页面dom太多,注意有的组件写的不好,会拖累整体页面。uni-app x 里减少dom数量的策略
2、onLoad里执行了耗时的同步计算

性能优化

https://doc.dcloud.net.cn/uni-app-x/performance.html

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

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

相关文章

软件设计模式:六大设计原则

文章目录 前言一、开闭原则二、里氏替换原则三、依赖倒转原则四、接口隔离五、迪米特法则六、合成复用原则总结 前言 在软件开发中,为了提高软件系统的可维护性和可复用性,增加软件的可扩展性和灵活性,程序员要尽量根据6条原则来开发程序&am…

Postman调用HTTPS需要配置

1、配置—Settings 2、General—SSL cert…:改成OFF 3、添加请求IP 欢迎大家阅读,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位大佬指点,在此表示感谢。觉得本文章有帮助到的,点个赞呗

项目进度管理:掌握进度管理技巧,保障项目不延期

项目进度问题通常在小型团队中并不显著,因为这类团队通常人数较少,成员间的沟通成本相对较低。这使得他们在执行项目时更加团结和协作。 然而,当团队规模扩大到上百人时,这使得沟通变得更为复杂,在这个庞大的团队中&…

JAVA线上事故:递归导致的OOM

最近因为人员离职,接手一个项目,是xxljob的客户端,部署在k8s上,在排查线上工单时,发现了一个问题: 在管理界面上,我惊讶的发现,三个月的时间,2个Pod,每个都重…

debian10安装配置vim+gtags

sudo apt install global gtags --version gtags //生成gtag gtags-cscope //查看gtags gtags与leaderf配合使用 参考: 【VIM】【LeaderF】【Gtags】打造全定制化的IDE开发环境! - 知乎

以ACM32F403为主控的车载电动尾门案例分析

方案概述 随着汽车行业智能化、电气化、网联化大潮的发展,电动后尾门逐渐普及化。此方案兼容多种人机交互接口,包括传统的按键开关,也包括智能脚踢传感器,远程手机控制等智能控制技术,支持防夹算法,支持全锁…

Apache+PHP环境配置 手动配置

准备工作,在G盘新建一个WAMP目录 1.获取Apache 打开下载地址Apache VS17 binaries and modules download,下载 httpd-2.4.58-win64-VS17.zip 将下载好的httpd-2.4.58-win64-VS17.zip拷贝到G:\WAMP目录下并解压到当前目录,得到Apache24目录 …

u盘加密软件合辑丨u盘怎么上锁某个文件夹

毫无疑问,U盘是我们生活中最常使用的移动储存设备,常见的U盘普遍没有使用限制,任何人都可以浏览其中的数据,这就可能导致数据泄密和隐私泄露,那么普通U盘怎么变成加密U盘呢? 一、上锁某个U盘文件夹 可以将…

Vue3+Echarts:堆积柱状图的绘制

一、需求 在Vue3项目中&#xff0c;想用Echarts来绘制堆积柱状图&#xff0c;去展示最近一周APP在不同渠道的登录人数效果如下&#xff1a; 二、实现 (关于Echarts的下载安装以及图表的样式设计&#xff0c;此处不展开&#xff01;) 1、Templates部分 <template>&l…

向本地maven中加载依赖

1、现在maven官网仓库找到相应依赖 Maven Repository: Search/Browse/Explore (mvnrepository.com) 2、下载相应jar包 3、使用maven命令在jar所在文件加内cmd运行 注意修改参数 -DgroupId&#xff1a;表示jar对应的groupId <groupId>io.confluent</groupId>…

菜鸟进阶数据大牛:如何系统学习BI商业智能

在这个信息爆炸式增长的时代&#xff0c;挖掘数据的潜在价值尤为重要&#xff0c;越来越多的人将目光聚集于商务智能BI领域。通过数据分析软件对来自不同的数据源进行统一的处理和管理&#xff0c;并以灵活的方式展示数据之间的联系&#xff0c;辅助企业进行决策。 在BI越发重…

MATLAB - 最优控制(Optimal Control)

系列文章目录 前言 - 什么是最优控制&#xff1f; 最优控制是动态系统满足设计目标的条件。最优控制是通过执行以下定义的最优性标准的控制律来实现的。一些广泛使用的最优控制方法有&#xff1a; 线性二次调节器 (LQR)/线性二次高斯 (LQG) 控制 模型预测控制 强化学习 极值…

HBase基础知识(一):HBase简介、HBase数据模型与基本架构

第1章HBase简介 1.1HBase定义 HBase是一种分布式、可扩展、支持海量数据存储的NoSQL数据库。 1.2HBase数据模型 逻辑上&#xff0c;HBase的数据模型同关系型数据库很类似&#xff0c;数据存储在一张表中&#xff0c;有行有列。但从HBase的底层物理存储结构&#xff08;K-V&a…

【Spring教程31】SSM框架整合实战:从零开始学习SSM整合配置,如何编写Mybatis SpringMVC JDBC Spring配置类

目录 1 流程分析2 整合配置2.1 步骤1&#xff1a;创建Maven的web项目2.2 步骤2:添加依赖2.3 步骤3:创建项目包结构2.4 步骤4:创建SpringConfig配置类2.5 步骤5:创建JdbcConfig配置类2.6 步骤6:创建MybatisConfig配置类2.7 步骤7:创建jdbc.properties2.8 步骤8:创建SpringMVC配置…

【MyBatis Plus】Service Mapper内置接口讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《MyBatis-Plus》。&#x1f3af;&#x1f3af; &am…

java借助代理ip,解决访问api频繁导致ip被禁的问题

前言 Java是一种非常流行的编程语言&#xff0c;许多开发者经常使用Java来开发各种类型的应用程序&#xff0c;包括访问API。然而&#xff0c;由于频繁访问API可能导致IP被禁的问题&#xff0c;我们需要借助代理IP来解决这个问题。 本文将为您展示如何使用Java借助代理IP来解…

项目中webpack优化配置(1)

项目中webpack优化配置 一. 开发效率&#xff0c; 体验 1. DLL&#xff08;开发过程中减少构建时间和增加应用程序的性能&#xff09; 使用 DllPlugin 进行分包&#xff0c;使用 DllReferencePlugin(索引链接) 对 manifest.json 引用&#xff0c;让一些基本不会改动的代码先…

jvm相关命令操作

查看jvm使用情况 jmap -heap PID 查看线程使用情况 jstack pid 查看当前线程数 jstack 21294 |grep -E (#[0-9]) -o -c 查看系统线程数 top -H top -Hp pid #查看具体的进程中的线程信息 使用 jps 命令查看配置了JVM的服务 查看某个进程JVM的GC使用情况 jstat -gc 进程…

STM32G4x FLASH 读写(修改HAL库驱动)

主要工作就是把HAL的超时用LL库延时替代&#xff0c;保留了中断擦写模式、轮询等待擦写&#xff0c;待验证哈。 笔者用的芯片为STM32G473CBT6 128KB Flash&#xff0c;开环环境为CUBEMXMDK5.32&#xff0c;因为G4已经没有标准库了&#xff0c;笔者还是习惯使用标准库的开发方式…

快速能访问服务器的文件

1、背景 访问ubuntu上的文件 2、方法 python3 -m http.server 8081 --directory /home/ NAS 共享访问协议 — NFS、SMB、FTP、WebDAV 各有何优势&#xff1f;http://1 Ubuntu 搭建文件服务器&#xff08;Nginx&#xff09;