wx.onAccelerometerChange(function(res) {
console.log(res.x)
console.log(res.y)
console.log(res.z)
}) 

加速度計的三軸

以下是一般移動設(shè)備的加速度計三軸坐標系示例圖：

以手機豎直面向用戶為例，加速計的三軸坐標系統(tǒng)的X、Y、Z軸定義如下：

• 沿著手機屏幕頂部向上是Y軸正方向，向下是Y軸負方向；
• 當手機頂部朝上時，沿著手機屏幕向右是X軸正方向，向左是X軸負方向；
• 正對手機時，垂直屏幕向外是Z軸正方向，垂直屏幕向里是Z軸負方向；

當手機處于靜止狀態(tài)時，手機此時只受一個重力加速度(1g=9.8m/s²)的作用，加速度計返回的res.x、res.y、res.z的值就是設(shè)備的三軸受到的加速度的值，取值范圍從[-1g,1g]。設(shè)備以不同方式放置時，x/y/z的值如下：

計算姿態(tài)角

Pitch = atan2(Y, Z) * 180/M_PI;Roll = atan2(-X, sqrt(Y*Y+ Z*Z)) * 180/M_PI; 
Roll = atan2(-X, sqrt(Y*Y + Z*Z)) * 180/M_PI;

• Roll（繞Y軸旋轉(zhuǎn)的角度）

當設(shè)備繞著自身Y軸旋轉(zhuǎn)時（表示手機左側(cè)或右側(cè)翹起的角度），該角度值將會發(fā)生變化，取值范圍是-90到90度。

• Pitch（繞X軸旋轉(zhuǎn)的角度）

當手機繞著自身的Y軸旋轉(zhuǎn)（表示手機頂部或尾部翹起的角度），該角度會發(fā)生變化，值的范圍是-180到180度。

接下來就是根據(jù)自己對橫豎屏角度的觀測，再結(jié)合微信小程序中，視頻全屏只能以手機向左旋轉(zhuǎn)方式全屏的特性，只對用戶左側(cè)橫屏判斷為橫屏狀態(tài)，實現(xiàn)代碼片段如下：

 // 0為豎屏，1為橫屏
let lastState = 0;
let lastTime = Date.now();

wx.startAccelerometer();

wx.onAccelerometerChange((res) => {
const now = Date.now();

// 500ms檢測一次
if (now - lastTime < 500) {
return;
}
lastTime = now;

let nowState;

// 57.3 = 180 / Math.PI
const Roll = Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) * 57.3;
const Pitch = Math.atan2(res.y, res.z) * 57.3;

// console.log('Roll: ' + Roll, 'Pitch: ' + Pitch)

// 橫屏狀態(tài)
if (Roll > 50) {
if ((Pitch > -180 && Pitch < -60) || (Pitch > 130)) {
nowState = 1;
} else {
nowState = lastState;
}

} else if ((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {
let absPitch = Math.abs(Pitch);

// 如果手機平躺，保持原狀態(tài)不變，40容錯率
if ((absPitch > 140 || absPitch < 40)) {
nowState = lastState;
} else if (Pitch < 0) { /*收集豎向正立的情況*/
nowState = 0;
} else {
nowState = lastState;
}
}
else {
nowState = lastState;
}

// 狀態(tài)變化時，觸發(fā)
if (nowState !== lastState) {
lastState = nowState;
if (nowState === 1) {
console.log('change:橫屏');
} else {
console.log('change:豎屏');
}
}
});

然后就可以在橫豎屏切換的狀態(tài)下，去切換視頻的橫豎屏了 
if (state === 1) {
video.requestFullScreen();
} else {
video.exitFullScreen();
}

其他

另外，在這里發(fā)現(xiàn)小程序的一個小bug，就是當進入一個頁面，馬上就調(diào)用requestFullScreen()方法去拉起視頻全屏時，會破壞整個頁面的布局，并且再調(diào)用全屏方法時，視頻就無法再全屏了，像這樣：

所以為了防止用戶直接以橫屏的狀態(tài)進入一個視頻播放頁，而我們的橫屏判斷檢測生效立即觸發(fā)全屏引發(fā)bug，我將監(jiān)聽橫豎屏的事件通過setTimeout(listener, 3000)延遲3s監(jiān)聽，這樣橫屏才不會觸發(fā)bug。

最后

文中的很多知識點很多都是從網(wǎng)絡文章學來，可能存在錯誤的理解，如有錯誤，歡迎各位指正。

最后再打個廣告，歡迎喜歡看游戲直播的小伙伴來試用我們的《TG電競》直播小程序，這里聚合各大平臺的知名主播，總有一款適合你哦。