大屏可视化开发问题汇总

162 阅读2分钟

1. 静态资源太多,切换卡顿

解决方式:将所有的静态资源在首页进行预加载,并进行提前绘制,如果不进行绘制,即使预加载了 初次打开也会看到很明显的绘制过程,体验不佳,所以将资源进行提前绘制,后面切换就比较丝滑。

2. 大屏的比例跟设计稿不一样,应该如何解决?

设计稿是1920:1080,16:9的比例,如果大屏不是这个比例,需要进行计算当前设备的比例,进行等比缩放,开发时,就可以直接拿设计稿上看到的像素(所见即所得),无须计算,当不在这个比例内时,使用黑边或者背景补。

3. 数据量庞大,如何做到可维护、可快速修改?

按照模块进行划分,统一模块的数据模板、数据结构、数据尽量可以进行动态配置。

4. 使用公共组件的时候,切换模块时,动态效果失效

由于vue的虚拟dom,将组件进行缓存了,使用v-show进行切换是无效,必须使用v-if进行销毁所有的dom,但是需要编码多个v-if,这时候,可以使用在切换的时候,组件使用动态key,这样就能够将所有模块共用一个,无须写多个v-if;

5. 缓存问题

由于直接输出js、css html,可直接打开。不上到线上服务器,直接通过磁盘打开,会导致没找host进行缓存,每次刷新都去重新拉取最新的资源,体验不佳。需要找到开箱即用的webserver,原本打算使用谷歌的插件来试试,后来发现2022年12月下架了,后来转换成nginx本地部署web服务,这样就可以通过端口访问,就可以进行缓存了