uni-app实现电视应用遭遇的坑(适配分辨率,白屏,版本不兼容...)


给客户做一个看板,要求以apk的方式安装在电视机上。

解决方案

一开始的方案vite + vue3实现看板再打包,放到uni-app生成的H5工程里,最后利用uni-app打包成apk。后续这条路走不通了,直接基于uni-app开发。

第一坑———运行直接白屏

完成开发后,利用uni-app打包成apk,在模拟器上跑的时候,直接白屏,控制台显示某些包出错了,移除第三方包后,改用其他方式实现。

第二坑——电视机显示不兼容

这个简单,在uni-appmainfest.json文件中找到安卓/IOS常用设置里的支持CPU类型,不用担心包的大小,直接全部勾上,搞定。

第三坑——电视竖屏显示

画面在电视上集中在中间区域,我们需要将app横屏。同样去mainfest.json文件中找到源码视图里的app-plus对象加上"screenOrientation" : [ "landscape-primary" ]
属性。注:不同的版本,可能字段不一样。

第四坑——分辨率适配问题

我们先来理解一下分辨率

  • 分辨率:指图像、屏幕或显示设备中能够显示的细节的精细程度,通常用水平和垂直方向上的像素数量来表示。它决定了画面的清晰度和细腻程度。比如常见的1920*1080就表示 (水平像素 × 垂直像素)的像素数量。

分辨率相同但是物理尺寸不同,比如一个58寸,一个75寸,理论上也不会影响整体布局,只是因为DPI的不同,展示出来的大小不一样。

设计稿是1920*1080,起初我是直接用rem去适配,但是到了电视机上很不理想,后来尝试了vw,vh依然存在问题,中间过程也试过了配置rpxCalcMaxDeviceWidth、rpxCalcBaseDeviceWidth、 rpxCalcIncludeWidthrpx发现都不行啊。最后干脆用1920的尺寸放大1倍去做一遍(我想着4K就是1920的2倍嘛),看看效果,结果呈现出来异常大,似乎大了很多?那么?我尝试把所有像素都缩小一倍,诶?58寸和75寸的4K电视机
都完美呈现画面了。其实我也没想明白…只能怀疑uni-app在打包的时候,对尺寸做了一些行为。

ai给了一个方法,但我没试过。是这样的

第五坑——uni-table

我需要把uni-table的边框全部去掉,在浏览器上看着没问题,在模拟器上边框依然会出现,直接原生Table一把嗦,搞定。

我的微信公众号: 梨的前端小屋


  目录