当前位置: 首页 > news >正文

uni-app学习记录

uni-app注意点记录

  1. 跳转到 tabBar 页面只能使用 switchTab 跳转
  2. 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url,在App平台可以使用 plus.runtime.openURL或web-view组件;H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。

页面加载时序介绍

接下来我们介绍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渲染的速度。

性能优化

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

http://www.lryc.cn/news/263843.html

相关文章:

  • API资源对象StorageClass;Ceph存储;搭建Ceph集群;k8s使用ceph
  • Databend 开源周报第 124 期
  • Arduino开发实例-液体流量测量
  • 【idea】解决sprintboot项目创建遇到的问题
  • ADC芯片CS1237在电子秤方案的优势
  • Leetcode的AC指南 —— 哈希表:202. 快乐数
  • 机器学习 项目结构 数据预测 实验报告
  • [Verilog] 设计方法和设计流程
  • C语言:指向数组的指针和指向数组元素的指针
  • SQL基础:SQL 介绍和数据库基础
  • SpringSecurity入门
  • iOS 应用在前台时显示通知
  • Hamming space
  • anaconda 安装 使用 pytorch onnx onnxruntime
  • Web请求与响应
  • ADS学习笔记(一)——更新中
  • 智能优化算法应用:基于冠状病毒群体免疫算法3D无线传感器网络(WSN)覆盖优化 - 附代码
  • 小型气象站是什么?
  • 官方指定Jmeter配置JVM堆内存方式
  • spark-常用算子
  • 《opencv实用探索·二十一》人脸识别
  • 前端项目配置下载源npm, yarn,pnpm
  • Elasticsearch之ik中文分词篇
  • 2023_Spark_实验三十:测试Flume到Kafka
  • urllib2 HTTP头部注入
  • 在 WebRTC 中,Offer/Answer 模型是协商 WebRTC 连接参数的关键部分
  • 数据结构:图解手撕B-树以及B树的优化和索引
  • useConsole的封装,vue,react,htmlscript标签,通用
  • Azure Machine Learning - 提示工程高级技术
  • 七款创意项目管理软件解决方案推荐:高效项目管理与团队协作工具