腾讯课堂在哪里看文件,腾讯课堂如何开课

首页 > 实用技巧 > 作者:YD1662023-11-04 18:17:42

组件过滤

可以看到在我们的项目中就发现了好几个未使用到的组件。

3.2. 请求优化3.2.1. 数据预拉取

数据预拉取需要在小程序的管理后台开启,数据来源可以选择开发者服务器或者云开发,选择开发者服务器的话会有一些限制,如果是直接填写 CGI 地址,就只能拉取一种数据,不够灵活,而如果再搭建一个服务去做预拉取涉及到的工作量又会很大,所以我们选择的是云开发的方式,大致流程如下图:

腾讯课堂在哪里看文件,腾讯课堂如何开课(13)

数据预拉取-大概

当小程序启动的时候,微信客户端会根据配置去拉取指定的云函数,在云函数中通过 cl5 调用业务后台的服务拉取到需要的数据,拉取到后客户端会将数据缓存在本地,当小程序启动成功后,在业务代码中调用 wx.getBackgroundFetchData 就可以拿到预拉取的数据,如果缓存数据拉到的是所需要的数据则可以直接渲染,如果不是则降级到业务中再拉一次接口。

在云函数中可以拿到本次小程序启动的 path 和 query 参数,所以我们可以根据这两个参数来判断本次预拉取需要调用业务后台的哪个服务,从而达到从不同的页面启动小程序都可以通过一个云函数预拉取到所需要的数据。

constpreFetchMap={ 'pages/index/index':fetchIndex, 'pages/course/course':fetchCourse, } //云函数入口函数 exports.main=async(event)=>{ const{path,query=''}=event; constfetchFn=preFetchMap[path]; if(fetchFn){ constres=awaitfetchFn(query); returnres; } return{ error:{ event, retcode:-1002, msg:`${path}页面未设置预拉取逻辑` } }; };

不过要注意的是,因为小程序自身做了很多初始化的优化,有可能在小程序启动后,预拉取的数据还没有返回,所以我们做了进一步的优化,在业务拉取的过程中通过 wx.onBackgroundFetchData 监听预拉取的返回,收到返回就直接渲染 ,尽可能的使用预拉取的数据来渲染首屏。

腾讯课堂在哪里看文件,腾讯课堂如何开课(14)

数据预拉取

3.2.2. 提前拉取 & 数据缓存

前面已经提到过,提前拉取就是要利用小程序切换页面的空隙开始拉取数据,从而在感官上较少数据请求的时间,整体的逻辑是通过封装的跳转逻辑,对应的页面添加不同的数据拉取逻辑,并将拉取的 promise 挂载在 App 上,当页面切换完成后优先使用 App 上的 promise 来获取数据。

数据缓存则是在数据拉取成功后,将比较固定的数据通过 wx.setStorage 缓存在本地,当第二次切换到这个页面时,先使用本地缓存的数据进行渲染,后面再通过拉取的数据来进行更新。

腾讯课堂在哪里看文件,腾讯课堂如何开课(15)

提前拉取

3.3. 交互优化3.3.1. 业务请求保障

保障业务请求的核心思路是让业务请求优先,我们封装了一个 排队请求模块 ,通过对 wx.request API的拦截,将请求根据配置有个优先级排序,低优先级的会在请求并发数达到一定的阈值之后被推到等待队列 WaitingQueue 中,留出足够的通道给到高优先级的业务请求。

腾讯课堂在哪里看文件,腾讯课堂如何开课(16)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.