uniapp live-player横屏功能笔记
uniapp live-player横屏功能笔记
需求背景：点击全屏按钮使得原本竖屏的直播变成横屏状态，并在横屏中显示自定义的控件。
这里的需求是点击按钮进行全屏翻转，而不需要做监听翻转，所以方法相对简单一些。
开发核心点
如何横屏？
一开始我有以下两种方向
- uni.createLivePlayerContext()
- orientation：horizontal
第一种就是创建live-player上下文livePlayerContext对象，如同video的全屏一样，会铺满整个屏幕，并覆盖原来页面上的东西。
第二种则是live-player组件的属性orientation，设置画面方向，可以将画面直接变成横向播放，不会有覆盖的问题
最终选择了第一种，使用livePlayerContext进行全屏，考虑的点也有两个：
- 横屏之后面上的控件是不同的展示控件，与竖屏是相差较多，所以打算重新写布局
- 使用属性将画面横屏的话，文件流是没有翻转的，覆盖在上面的控件就会比较难写
如果说是做小程序的页面自动翻转，文件流是会翻转的，但是目前我处理的业务并不符合这个要求，所以我选择了更快速的方案
全屏展示的组件
关于全屏之后的这个控件，也有几个坑：
- 标签覆盖问题
- 单位问题
标签覆盖问题
live-player全屏之后，同级的元素是会被覆盖的，就算是使用cover-view也无法显示，所以需要全屏时显示控件，只能写在live-player标签的内部。
<live-player>
<view>内部标签全屏时会显示</view>
</live-player>
<view>外部标签在全屏时不会显示</view>
<cover-view>外部标签cover-view在全屏时不会显示</cover-view>
单位问题
在开发时主要使用了rpx作为主要单位进行布局，然而竖屏的时候是正常的，在横屏的时候这个元素的宽高就会被拉伸，主要是感觉被横向拉长了，这应该能推测出rpx的计算跟屏幕尺寸是有关的，并不是固定的。
解决这个问题也有两个方案：
- 使用px作为单位进行布局，这样布局不会因为屏幕的翻转而改变大小，我主要是在重新编写横屏控件时使用了px进行布局。
- 使用vmin对元素宽高进行动态转换。主要是用来复用原本用rpx编写好的组件，将组件内的rpx单位转为vmin，则可以横竖屏通用。vmin这个单位是取相对于视口的宽度或高度中较小的那个，所以无论横竖都会是相同的。
将rpx转换成vmin单位我使用了scss的函数进行转换，公式如下：
@function toVmin($rpx){
@return #{$rpx * 100 / 750}vmin
}
.redpack{
// width: 355rpx; // 原本写法
width: toVmin(355); // 转换写法
}
