微信小程序如何橫屏
從小程序基礎(chǔ)庫版本 2.4.0 開始，小程序在手機上支持屏幕旋轉(zhuǎn)。使小程序中的頁面支持屏幕旋轉(zhuǎn)的方法是：在 app.json 的 window 段中設(shè)置 "pageOrientation": "auto" ，或在頁面 json 文件中配置 "pageOrientation": "auto" 。
PS：1、以這種方式實現(xiàn)小程序屏幕旋轉(zhuǎn)，需要用戶關(guān)閉手機上的“屏幕鎖定”選項
PS：2、由于開啟橫屏需要修改json文件的配置，而這個文件我們無法在程序運行中進行修改，故我們無法通過點擊按鈕或其他操作去使手機屏幕發(fā)生旋轉(zhuǎn)，只是是設(shè)置為"pageOrientation": "auto"用戶主動旋轉(zhuǎn)手機觸發(fā)
PS：3、我們可以在進入某一個頁面的時候，固定屏幕橫屏展示，設(shè)置"pageOrientation": "landscape "
如何獲取當(dāng)前屏幕狀態(tài)
使用 selectorQuery.selectViewport可以獲取到當(dāng)前的屏幕狀態(tài)。這種方式比較麻煩，這里介紹一種使用wx.onWindowResize進行監(jiān)聽的方式。
onShow() {
let that = this;
wx.onWindowResize(function(res) {
if (res.deviceOrientation === 'landscape') {
that.isRotating = true;
} else {
that.isRotating = false;
}
})
}
上面代碼中，我們可以在wx.onWindowResize函數(shù)的回調(diào)中獲取到當(dāng)前屏幕的方向，并賦值給isRotating。當(dāng)然，我們還可以在回調(diào)中拿到windowWidth（變化后的窗口寬度，單位 px）和windowHeight（變化后的窗口高度，單位 px）屬性。
wx.onWindowResize函數(shù)是一個監(jiān)聽函數(shù)，類似Vue中的watch，我們可以把它放到onShow中。
橫屏后出現(xiàn)的適配問題
我們都知道，微信小程序在豎屏狀態(tài)下，寬度100%，100VW的值為750rpx。但是在橫屏之后，750rpx的實際寬度為手機屏幕的高。如圖：
在這種情況下，我們的界面將會變大。
舉個簡單例子，假如手機屏幕的寬高比為1:2，我們有一個按鈕大小為100rpx100rpx，那么在豎屏狀態(tài)下，顯示正常，橫屏狀態(tài)下，按鈕的顯示寬高將會變成原來的2倍，當(dāng)然他仍然是100rpx100rpx，但是顯示出來卻是變大了。
橫屏后的適配方案
使用px進行布局
我們可以看到，使用px進行布局時，橫屏之后元素并沒有變大，所以這種方案是可行的。
但是，我們可以看到的是，375px在橫屏?xí)r并沒有占滿全屏，也就是px和rpx之間并不是簡單的1:2的對應(yīng)關(guān)系。
這里我們不討論個物理像素、pt、px之間復(fù)雜的關(guān)系(/ω＼)
所以，使用
px布局，也不是那么好用。
使用vmin進行布局
先介紹下css3的兩個屬性vmax和vmin
vmax 相對于視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax
vmin 相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin
文檔說明
在這里我們只用到了vmin。
當(dāng)我們在豎屏?xí)r候，100vmin的取值為手機屏幕寬度，當(dāng)橫屏?xí)r候，100vmin的取值仍然為手機屏幕寬度，所以以vmin為單位的元素，在手機屏幕發(fā)生旋轉(zhuǎn)的時候，其顯示大小并不會發(fā)生改變（畢竟不管橫屏豎屏，100vmin都等于屏幕的寬度）。
在使用rpx進行布局時，750rpx的取值為手機屏幕的寬度，而在使用vmin時，100vmin的取值為手機屏幕的寬度，所以，rpx和vmin之間存在一個換算關(guān)系，即：x rpx=( x * 100 / 750)vmin。舉個例子，75rpx轉(zhuǎn)化為vmin為75 * 100 / 750 = 10 vmin。所以，我們只要將rpx轉(zhuǎn)化成vmin就可以愉快的碼頁面了~
使用scss進行轉(zhuǎn)化
在實際開發(fā)中，我們不可能去手動計算每一個vmin的值，由于我用的是scss，所以我用scss進行了一下預(yù)處理。這里提供兩種方式，一種是css函數(shù)，另一種是css mixin
//css函數(shù)
@function tovmin($rpx){//$rpx為需要轉(zhuǎn)換的字號
@return #{$rpx * 100 / 750}vmin;
}
//使用方式
.slideAddPanel {
width: tovmin(48);
height: tovmin(80);
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 tovmin(2) tovmin(12) 0 rgba(0, 0, 0, 0.2);
line-height: tovmin(80);
border-radius: 0 tovmin(10) tovmin(10) 0;
}
//css mixin
@mixin upx2vmin($property, $values...) {
$max: length($values);//返回$values列表的長度值
$pxValues: '';
$remValues: '';
@for $i from 1 through $max {
$value: nth($values, $i);
$remValues: #{$remValues + ($value * 100 / 750)}vmin;
@if $i < $max {
$remValues: #{$remValues + " "};
}
}
#{$property}: $remValues;
}
//使用方式
.slideAddPanel {
@include remCalc(width,45);
@include remCalc(margin,1,.5,2,3);
}
PS：這兩種方法均來自網(wǎng)絡(luò)，我還是比較喜歡第一種~
