给客户做一个看板,要求以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、
rpxCalcIncludeWidth
和rpx
发现都不行啊。最后干脆用1920的尺寸放大1倍去做一遍(我想着4K就是1920的2倍嘛),看看效果,结果呈现出来异常大,似乎大了很多?那么?我尝试把所有像素都缩小一倍,诶?58寸和75寸的4K电视机
都完美呈现画面了。其实我也没想明白…只能怀疑uni-app在打包的时候,对尺寸做了一些行为。
ai给了一个方法,但我没试过。是这样的
第五坑——uni-table
我需要把uni-table
的边框全部去掉,在浏览器上看着没问题,在模拟器上边框依然会出现,直接原生Table一把嗦,搞定。