手记

【学习打卡】第十天 中前台平台搭建,提高工作效率

第一模块


学习课程名称:基于 Vue3 ,打造前台+中台通用提效解决方案
章节名称:移动端路由切换解决方案 —— 虚拟任务栈让你的 H5 像APP一样丝滑
讲师姓名:Sunday


第二模块


课程内容概述

  1. trigger-menu 和 trigger-menu-item 构建方案分析
  2. 前台业务下 H5 的应用场景
  3. transition-router-view 构建方案分析 与 虚拟任务栈
  4. transition-router-view 构建方案之过渡动效
  5. 虚拟任务栈处理
  6. 记录页面滚动位置

第三模块


针对对通用组件trigger-menu 和 trigger-menu-item 的分析:

  1. trigger-menu:对于它而言,只起到一个 包裹容器 的作用,所以我们只需要提供一个对应的插槽即可
  2. trigger-menu-item :起到了对应的展示作用,展示包括了 icon 和 文字。所以内部应该存在 svg-icon
    用来展示图片,存在一个插槽用来展示文字。

前台业务下 H5 的应用场景

通常情况下我们说起移动端项目,指的一般是两种:

原生 APP
H5 网页

那么此时我们所做的这个移动端,指的其实就是 H5 网页

该内容依然是以网页为主,但是被运行到手机端之中。

而 H5 网页应用到手机端的时候,通常也是有两种运行的形式:

  1. 直接在手机端浏览器中运行:这种使用情况相对较少。在这种情况下,用户明显的知道这就是一个网页。
  2. 在原生组件 WebView 中运行(混合开发):通常会被嵌入到 APP之中,这种使用情况比较多。所以以下内容,主要针对这种情况进行说明。

那么这种情况下,用户会认为该内容是 APP 的一部分,不会把它当成网页,而是会把它当做 原生APP。那么一旦用户把它作为 APP 来进行衡量,那么就会对这块应用有更高的要求。

路由之间的跳转应该具备对应的动画,并且上一个页面的状态应该被缓存(页面的滚动状态和数据视图)。
所以想要实现这样的功能,那么我们就必须要使用到路由的过渡动效 。

虚拟任务栈

我们把:组件的进入和退出流程,比作一个栈。

那么只有进入到栈中的组件才需要被缓存,这就像 Android 中的 任务栈 概念一样。

在当前咱们移动端的组件处理中,我们同样期望有一个这样的栈来维护我们的组件进入和退出流程,所以我们把这样的一套流程,称作:虚拟任务栈。

然后我们可以通过 keep-alive 中的 include 概念,把 虚拟任务栈 - 数组 进行绑定,从而实现 任务栈 的缓存概念。

记录滚动位置

keep-alive 组件只能够帮助我们缓存组件,但是不能够记录页面的滚动位置。

所以如果我们想要记录页面滚动位置的话,需要通过 useScroll 进行记录。


第四模块

1人推荐
随时随地看视频
慕课网APP