小程序的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小 ...
随机推荐
- Spring配置文件中的那些标签意味着什么(持续更新)
前言 在看这边博客时,如果遇到有什么不清楚的地方,可以参考我另外一边博文.Spring标签的探索,根据这边文章自己来深入源码一探究竟.这里自己只是简单记录一下各标签作用,每个人困惑不同,自然需求也不一 ...
- VsCode之使用WebView通信
之前我在这篇文章VsCode插件开发之插件初步通信 通过插件完成通信,这回我还是通过插件,只不过方式主要以在ts文件里面使用webview来进行通信. 另外在此声明,一定要好好看仔细看官方文档,国内关 ...
- JavaScript高级程序设计学习(一)之介绍
作为一名web开发人员,日常用的最多的就是js,也就是大名鼎鼎的ECMAScript,又称javascript.再次声明js与java除了语法上相似,没有半毛钱关系.据说之所以叫javascript, ...
- Linux中添加、修改和删除用户和用户组
宽为限 紧用功 功夫到 滞塞通 一.用户: 在创建用户时,需要为新建用户指定一用户组,如果不指定其用户所属的工作组,自动会生成一个与用户名同名的工作组.创建用户user1的时候指定其所属工作组user ...
- 3902-luogu 最长不下降子区间
题目 现有数列A1,A2,…An ,修改最少的数字,使得数列严格单调递增. 依旧是书上的题 但是书上的范围比较小 而 lg上的数据范围很大 按书上的 方法 是会超时 只能过一半的数据 但是 算法思路还 ...
- docker load导入镜像报错:open /var/lib/docker/tmp/docker-import-970689518/bin/json: no such file or directory
今天将之前打包好的mysql5.7.19的tar包通过docker load命令导入到Docker环境中却报出了如下错误: [root@host---- task]# docker load < ...
- Linux集锦
一:Linux文件系统 Linux系统有一个重要概念:一切都都式文件. Linux支持五种文件类型: Linux的目录结构如下: 常见目录说明: /bin: 存放二进制可执行文件(ls,cat,mkd ...
- WPF中反转3D列表项
原文:WPF中反转3D列表项 WPF中反转3D列表项 周银辉记得在苹果电脑中有一个很酷的 ...
- Luogu P1966 火柴排队
这还是一道比较简单的题目,稍微想一下就可以解决.终于有NOIP难度的题目了 首先我们看那个∑(ai-bi)^2的式子,发现这个的最小值就是排序不等式 所以我们只需要改变第一组火柴的顺序,使它和第二组火 ...
- 利用matplotlib的plot函数实现图像绘制
模式识别的一个实验,要求画出贝叶斯决策的图.这里我是利用python中的matplotlib库实现的图线的拟合.主要对于matplotlib的使用可以参照博客:webary 如果要绘制三维图像可以参考 ...