在pages. json中
全局在globalStyle添加"pageOrientation": "auto"
单个页面在单个页面的配置style下添加如下
"mp-weixin": {
"pageOrientation": "auto"
},
单个页面vue中添加如下
onShow(){
// 0为竖屏,1为横屏
let lastState = 0;
let lastTime = Date.now();
wx.startAccelerometer();
wx.onAccelerometerChange((res) => {
// console.log('onAccelerometerChange执行了')
const now = Date.now();
// 500ms检测一次 500ms实测可能会导致页面的onResize先执行了,
if (now - lastTime < 300) {
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) {
var flag=false;
var data = wx.onWindowResize(function(res){
flag = true;
})
setTimeout(
function () {
if(flag == false){
uni.showToast({
icon:'none',
duration:5000,
title:'请先打开手机的自动旋转功能!'
})
}
}, 2000);
console.log('change:横屏');
}else {
console.log('change:竖屏');
}
}
});
},