小程序的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。

转载于:https://www.cnblogs.com/dianzan/p/9668488.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫自学之第(②)篇——BeautifulSoup解析网页

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 学了requests&#xff0c;了解了伪装技巧后&#xff0c;终于能爬到些比较正常的网页…

[css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解

[css] 说下你对css样式的这几个属性值initial、inherit、unset、revert的理解 initial&#xff08;初始&#xff09;、inherit&#xff08;继承&#xff09;、unset&#xff08;未设置&#xff09;、revert&#xff08;还原&#xff09; inherit可以继承父级元素的属性&#x…

Django通过中间件实现登录验证demo

前提&#xff1a;中间件版的登录验证需要依靠session&#xff0c;所以数据库中要有django_session表。 1 from django.conf.urls import url2 from django.contrib import admin3 from app01 import views4 5 urlpatterns [6 url(r^admin/, admin.site.urls),7 url(r^…

Python爬虫自学之第(③)篇——实战:requests+BeautifulSoup实现静态爬取

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 前篇全片都是生硬的理论使用&#xff0c;今天就放个静态爬取的实例让大家体验一下B…

[css] 如何解决css加载字体跨域的问题?

[css] 如何解决css加载字体跨域的问题&#xff1f; 刚才碰到一个css加载字体跨域问题&#xff0c;记录一下。 站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com&#xff0c;而静态文件的域名为 st.domain.com。 问题&#xff1a; 页面中加载css文件&…

django cookie、session

1.cookie (1)什么是cookie? 服务器让浏览器保存在浏览器本地的键值对 (2) 为什么要有cookie&#xff1f; 因为http协议无状态&#xff0c;每一次访问请求没有任何关系&#xff0c;无法保存状态 (3)cookie的特点&#xff1f; cookie是由服务器给浏览器设置的 在同一个浏览器中访…

Python爬虫自学之第(④)篇——强大的正则表达式,re模块

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 如果把BeautifulSopu比喻成通过线索一步步接近目标的侦探的话&#xff0c;那么正则…

[css] 当使用@font-face的时候,为什么src中要加入local呢?

[css] 当使用font-face的时候&#xff0c;为什么src中要加入local呢&#xff1f; 网上的说法片面不一&#xff0c;CSDN和掘金都没见到正确回复&#xff0c;然后我在MDN找到了比较明确的说法。MDN的 font-face 这是一个CSS 规则 &#xff0c;它允许网页开发者为其网页指定在…

Python爬虫自学之第(⑤)篇——爬取某宝商品信息

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 能看到这里说明快进入动态网页爬取了&#xff0c;在这之前还有一两个知识点要了解&…

Vue通信、传值的多种方式,详解

Vue通信、传值的多种方式&#xff0c;详解 转自&#xff1a;https://blog.csdn.net/qq_35430000/article/details/79291287 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件&#xff08;触发事件可以是点击事件、钩子函数等&#xff09; this.…

[css] 你有使用过font-size-adjust属性吗?说说它的作用是什么?

[css] 你有使用过font-size-adjust属性吗&#xff1f;说说它的作用是什么&#xff1f; 很少用。 实际应用场景&#xff1a; 实际应用场景在指定字体时&#xff0c;出于安全考虑&#xff0c;人们通常会为一个元素指定多种字体&#xff0c;希望当首选字体不可用时&#xff0c;让…

Python代写CSSE1001/7030 python程序作业、代做python CSSE1001/7030程序作业、 代写CSSE1001/7030 python 作业...

Python代写CSSE1001/7030 python程序作业、代做python CSSE1001/7030程序作业、 代写CSSE1001/7030 python 作业UnoAssignment 2CSSE1001/7030Semester 2, 2018Version 1.0.110 marksDue Friday 21st September, 2018, 20:30IntroductionThis assignment follows a programming…

selenium等待定位标签加载完再执行

遇到的问题描述 我们经常会碰到用selenium操作页面上某个元素的时候&#xff0c; 需要等待页面加载完成后&#xff0c; 才能操作。 否则页面上的元素不存在&#xff0c;会抛出异常。 比如&#xff1a; 一个动态网页使用了ajax的异步加载&#xff0c;我们需要等待元素加载…

[css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗?

[css] body{height:100%}和html,body{height:100%}有什么区别&#xff1f;为什么html要设置height:100%呢&#xff0c;html不就是整个窗口吗&#xff1f; html是body的父级&#xff0c;在缺少了父级的宽高之后&#xff0c;如果给body设置一个渐变色背景的话将不会正常显示。个…

数据类型的操作

时间数据类型 1.mongo中存储时间大多为ISOData 2.获取当前时间   1. 使用new Date() 自动生成当前时间   2. 使用 ISODate() 生成当前时间   3. 获取计算机时间生成时间格式字符串 Date() 3.ISODate()   功能&#xff1a; 生成mongodb时间存储类型   参数&#xff1a…

python+selenium 浏览器无界面模式运行

以Chrome浏览器为例&#xff1a; 方法一&#xff1a; from selenium.webdriver import Chrome, ChromeOptionsopt ChromeOptions() # 创建Chrome参数对象 opt.headless True # 把Chrome设置成可视化无界面模式&#xff0c;windows/Linux 皆可 driv…

[css] 你所理解的css高级技巧有哪些?

[css] 你所理解的css高级技巧有哪些&#xff1f; 各种动画效果&#xff0c;能用css的都可以不去用js写的&#xff0c;对我来说就很高级个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣…

[css] 举例说明跟字体相关的属性有哪些

[css] 举例说明跟字体相关的属性有哪些 font-size&#xff1a;字体大小 font-weight&#xff1a;字体粗细 font-family&#xff1a;字体类型 color&#xff1a;字体颜色 等等个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很…

python 文件读写(追加、覆盖)

很明了的一个常用参数图标&#xff1a; 更像细的一个参数说明&#xff1a; 由于文件读写时都有可能产生IOError&#xff0c;一旦出错&#xff0c;后面的f.close()就不会调用。所以&#xff0c;为了保证无论是否出错都能正确地关闭文件&#xff0c;我们可以使用try ... finally来…

职场篇:失败之后

前言 当我写下这个题目之后&#xff0c;我想到了一首歌词"长大以后&#xff0c;我只能奔跑&#xff0c;我多害怕 黑暗中跌倒 "&#xff0c;我不由得哼起这首歌&#xff0c;一种心痛孜然而生。 我也想到了一本小说《飞升之后》&#xff0c;讲述主人公飞升后&#xf…