小程序的wx.onAccelerometerChange
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/s²)的作用,加速度计返回的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。
小程序的wx.onAccelerometerChange的更多相关文章
- 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
- 微信小程序遍历wx:for,wx:for-item,wx:key
微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...
- 小程序调用wx.chooseLocation接口的时候无法获取权限(ios)
ios手机小程序调用wx.chooseLocation接口的时候,获取权限的时候报authorize:fail:require permission desc这样子的错误,这是由于苹果的安全机制导致需 ...
- 微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题
以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx ...
- 【微信小程序】wx.openLocation调取失败
在调取地图的时候发现,wx.openLocation的方法在模拟器和安卓手机上都可以用,在苹果手机上报错. 报错为调取失败:fail invoke too frequently ...
- 小程序使用wx.chooseAddress获取用户手机号码,微信chooseAddress接口获取用户收货信息
通常用户在商城购买产品后,需要填写他的收货信息,方便我们发货,但是在手机上写字非常不方便,一个客户的收货信息包括:姓名,地址和手机号码这些内容全部填写的话,至少要写20个字. 地址 所以有些客户在手机 ...
- 【微信小程序】 wx:if 与 hidden(隐藏元素)区别
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否. 区别: wx:if 是遇 true 显示,hidden 是遇 false 显示. wx:if 在隐藏的时候不渲染,而 hidden ...
- 小程序 滚动wx.pageScrollTo
API:https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html wx.pageScrollTo 在小程序的开 ...
- 微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常
新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能原因:0:后台域名没有配置0.1:域名不支持https1:没有重启工具:2:域名没有备案,或是备案后不足24小 ...
随机推荐
- python编程入门之简介
引用百度百科: Python是一种面向对象.直译式计算机程序设计语言,由荷兰人Guido van Rossum发明于1989年,1991年发行第一个公开发行版.它常被昵称为胶水语言,它能够很轻松的把用 ...
- ASP 基础三 SQL指令
一 增删改查 <% set conn=server.CreateObject("adodb.connection") DSNtemp="DRIVER={SQL Se ...
- 【Codeforces 3D】Least Cost Bracket Sequence
Codeforces 3 D 题意:有一个括号序列,其中一些位置是问号,把第\(i\)个问号改成(需要\(a_i\)的代价,把它改成)需要\(b_i\)的代价. 问使得这个括号序列成立所需要的最小代价 ...
- QT 字符串的使用技巧总结
QT 的字符串的 使用的总结. 1.字符串截取函数的使用 QString str; QString csv = "forename,middlename,surname,phone" ...
- 网易云音乐 歌词制作软件 BesLyric (最新版本下载)
导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...
- [01] AJAX
1.概述 AJAX,"Asynchronous JavaScript And XML"的简称,即"异步的JavaScript和XML".AJAX的作用在于页面中 ...
- VS2017中 C# dll引用(C生成dll,C++生成dll)小结 - 简书
原文:VS2017中 C# dll引用(C生成dll,C++生成dll)小结 - 简书 dll引用小结 一.dll与应用程序 动态链接库(也称为DLL,即为“Dynamic Link Library” ...
- 轻量级WebApi请求插件:PostMan
时间很宝贵,废话不多说,只说三句,如下: 十年河东,十年河西,莫欺骚年穷!~_~ 打错个字,应该是莫欺少年穷! 学历代表你的过去,能力代表你的现在,学习代表你的将来. 学无止境,精益求精. 本次介绍的 ...
- 关于LCA
LCA:最近公共祖先 指在有根树中,找出某两个结点u和v最近的公共祖先 如图,5,7的最近公共祖先就是3 接下来,我们来了解如何求解LCA No.1 暴力 首先想到的肯定是暴力,我们搜索,从两个节点一 ...
- default construction
4种情况下编译器会构造出nontrivial(有用)的构造函数 带有default construction的member class object 我们有两个class: class Foo { p ...