https://www.2cto.com/kf/201802/724174.html（copy）

也許有人會問，小程序中都是豎直app形態，要橫豎屏判斷有什么用?即使判斷出了橫屏狀態，你能把小程序橫過來?答案是不能的，但是判斷當前設備處于橫屏或者豎屏狀態來實現一些友好的用戶體驗交互方式的需求確實存在。例如手機橫屏，讓視頻播放自動全屏，手機豎屏，讓視頻切換回來小屏。

然而，截止至目前，小程序官方的API中并沒有提供這樣的橫豎屏判斷的方法。那么我們只能自己想辦法實現這樣的判斷。小程序的設備API中提供了加速度計的監聽方法，使用方法如下：

wx.onAccelerometerChange(function(res) {

console.log(res.x)

console.log(res.y)

console.log(res.z)

})

加速度計的三軸

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

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

沿著手機屏幕頂部向上是Y軸正方向，向下是Y軸負方向;

當手機頂部朝上時，沿著手機屏幕向右是X軸正方向，向左是X軸負方向;

正對手機時，垂直屏幕向外是Z軸正方向，垂直屏幕向里是Z軸負方向;

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

計算姿態角

在stackoverflow上找到了根據加速度計三軸的值計算姿態角公式，經過結合設備的三軸坐標方向對公式進行調整，最終得出了公式：

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軸旋轉的角度)

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

Pitch(繞X軸旋轉的角度)

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

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

// 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)

// 橫屏狀態

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);

// 如果手機平躺，保持原狀態不變，40容錯率

if ((absPitch > 140 || absPitch < 40)) {

nowState = lastState;

} else if (Pitch < 0) { /*收集豎向正立的情況*/

nowState = 0;

} else {

nowState = lastState;

}

}

else {

nowState = lastState;

}

// 狀態變化時，觸發

if (nowState !== lastState) {

lastState = nowState;

if (nowState === 1) {

console.log('change:橫屏');

} else {

console.log('change:豎屏');

}

}

});

然后就可以在橫豎屏切換的狀態下，去切換視頻的橫豎屏了

if (state === 1) {

video.requestFullScreen();

} else {

video.exitFullScreen();

}

其他

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

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

轉載于:https://www.cnblogs.com/dianzan/p/9668488.html

總結

以上是生活随笔為你收集整理的小程序的wx.onAccelerometerChange的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。