Orientation模块管理设备的方向信息，包括alpha、beta、gamma三个方向信息，通过plus.orientation可获取设备方向管理对象

最新推荐文章于 2024-07-03 13:59:04 发布

低吟~浅唱

最新推荐文章于 2024-07-03 13:59:04 发布

阅读量1.2k

点赞数

分类专栏：编程小技能文章标签： javascript

本文链接：https://blog.csdn.net/qq_40575646/article/details/122836962

版权

编程小技能专栏收录该内容

324 篇文章 1 订阅

订阅专栏

Orientation模块管理设备的方向信息，包括alpha、beta、gamma三个方向信息，通过plus.orientation可获取设备方向管理对象。

方法：

getCurrentOrientation: 获取当前设备的方向信息，包括alpha、beta、gamma三个方向信息
watchOrientation: 监听设备方向信息的变化
clearWatch: 关闭监听设备方向信息

对象：

OrientationOption: JSON对象，监听设备方向感应器参数
Rotation: JSON对象，设备方向信息数据

回调方法：

OrientationSuccessCallback: 获取设备方向信息成功的回调函数
OrientationErrorCallback: 获取设备方向信息失败的回调函数

权限：

5+功能模块（permissions）

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#ffffff">{</span>
<span style="color:#87ceeb">// ...</span>
<span style="color:#ffa0a0">"permissions"</span><span style="color:#ffffff">:{</span>
	<span style="color:#87ceeb">// ...</span>
	<span style="color:#ffa0a0">"Orientation"</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span>
		<span style="color:#ffa0a0">"description"</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">"方向传感器"</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
			</code></span></span>

getCurrentOrientation

获取当前设备的方向信息，包括alpha、beta、gamma三个方向信息

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">orientation</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getCurrentOrientation</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> successCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCB </span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

方向信息是设备相对于水平初始方向分别以z、x、y轴为轴心旋转的角度，对应值为alpha、beta、gamma三个方向的信息。方向信息可通过successCB回调函数返回。方向信息获取失败则调用回调函数errorCB

参数：

successCB: ( OrientationSuccessCallback ) 必选 获取设备方向信息成功回调函数
errorCB: ( OrientationErrorCallback ) 可选 获取设备方向信息失败回调函数

返回值：

void : 无

平台支持：

Android - 2.2+ (支持) :
支持
iOS - 4.3+ (支持) :
支持

示例：

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Orientation Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#87ceeb">// 扩展API加载完毕后调用onPlusReady回调函数 </span><span style="color:#ffffff">
document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"plusready"</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> onPlusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span> <span style="color:#ffffff">);</span>
<span style="color:#87ceeb">// 扩展API加载完毕，现在可以正常调用扩展API</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> onPlusReady</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">orientation</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getCurrentOrientation</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> o </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"Orientation\nAlpha:"</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> o</span><span style="color:#ffffff">.</span><span style="color:#ffffff">alpha </span><span style="color:#ffffff">+</span> <span style="color:#ffa0a0">"\nBeta:"</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> o</span><span style="color:#ffffff">.</span><span style="color:#ffffff">beta </span><span style="color:#ffffff">+</span> <span style="color:#ffa0a0">"\nGamma:"</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> o</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gamma </span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">}</span> <span style="color:#ffffff">);</span> 
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span><span style="color:#ffffff">
		Orientation
	</span><span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

watchOrientation

监听设备方向信息的变化

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#98fb98">Number</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">orientation</span><span style="color:#ffffff">.</span><span style="color:#ffffff">watchOrientation</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> successCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCB</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> option </span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

方向信息是设备相对于水平初始方向分别以z、x、y轴为轴心旋转的角度，对应值为alpha、beta、gamma三个方向的信息。watchOrientation每隔固定时间就获取一次设备的方向信息，通过successCB回调函数返回。可通过option的frequency参数设定获取设备方向信息的时间间隔。方向信息获取失败则调用回调函数errorCB。

参数：

successCB: ( OrientationSuccessCallback ) 必选
获取设备方向信息成功回调函数
errorCB: ( OrientationErrorCallback ) 可选
获取设备方向信息失败回调函数
option: ( OrientationOption ) 可选
监听设备方向信息的参数，如更新数据的频率等

返回值：

Number : 用于标识方向信息监听器，可通过clearWatch方法取消监听。

平台支持：

Android - 2.2+ (支持) :
支持
iOS - 4.3+ (支持) :
支持

示例：

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#cccccc"><!DOCTYPE html></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
	<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>></strong></span>
	<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Orientation Example</span><span style="color:#f0e68c"><strong></title></strong></span>
	<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#87ceeb">// 扩展API加载完毕后调用onPlusReady回调函数 </span><span style="color:#ffffff">
document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"plusready"</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> onPlusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span> <span style="color:#ffffff">);</span>
<span style="color:#87ceeb">// 扩展API加载完毕，现在可以正常调用扩展API</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> onPlusReady</span><span style="color:#ffffff">()</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
	plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">orientation</span><span style="color:#ffffff">.</span><span style="color:#ffffff">watchOrientation</span><span style="color:#ffffff">(</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> o </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"Orientation\nAlpha:"</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> o</span><span style="color:#ffffff">.</span><span style="color:#ffffff">alpha </span><span style="color:#ffffff">+</span> <span style="color:#ffa0a0">"\nBeta:"</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> o</span><span style="color:#ffffff">.</span><span style="color:#ffffff">beta </span><span style="color:#ffffff">+</span> <span style="color:#ffa0a0">"\nGamma:"</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> o</span><span style="color:#ffffff">.</span><span style="color:#ffffff">gamma </span><span style="color:#ffffff">);</span>
	<span style="color:#ffffff">},</span> <span style="color:#f0e68c"><strong>function</strong></span> <span style="color:#ffffff">(</span><span style="color:#ffffff"> e </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span><span style="color:#ffffff">
		alert</span><span style="color:#ffffff">(</span> <span style="color:#ffa0a0">"Orientation error: "</span> <span style="color:#ffffff">+</span><span style="color:#ffffff"> e</span><span style="color:#ffffff">.</span><span style="color:#ffffff">message </span><span style="color:#ffffff">);</span> 
	<span style="color:#ffffff">}</span> <span style="color:#ffffff">);</span> 
<span style="color:#ffffff">}</span>
	<span style="color:#f0e68c"><strong></script></strong></span>
	<span style="color:#f0e68c"><strong></head></strong></span>
	<span style="color:#f0e68c"><strong><body></strong></span><span style="color:#ffffff">
		Orientation watch
	</span><span style="color:#f0e68c"><strong></body></strong></span>
<span style="color:#f0e68c"><strong></html></strong></span>
				</code></span></span>

uni-app使用plus注意事项

clearWatch

关闭监听设备方向信息

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">orientation</span><span style="color:#ffffff">.</span><span style="color:#ffffff">clearWatch</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> watchId </span><span style="color:#ffffff">);</span>
				</code></span></span>

参数：

watchId: ( Number ) 必选
需要取消的方向监听器标识，调用watchOrientation方法的返回值。

返回值：

void : 无

平台支持：

Android - 2.2+ (支持) :
支持
iOS - 4.3+ (支持) :
支持

OrientationOption

JSON对象，监听设备方向感应器参数

属性：

frequency: (Number 类型 )更新方向信息的时间间隔
数值类型，单位为ms，默认值为500ms。

Rotation

JSON对象，设备方向信息数据

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>interface</strong></span> <span style="color:#98fb98">Rotation</span> <span style="color:#ffffff">{</span>
	<span style="color:#f0e68c"><strong>readonly</strong></span><span style="color:#ffffff"> attribute </span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff"> alpha</span><span style="color:#ffffff">;</span>
	<span style="color:#f0e68c"><strong>readonly</strong></span><span style="color:#ffffff"> attribute </span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff"> beta</span><span style="color:#ffffff">;</span>
	<span style="color:#f0e68c"><strong>readonly</strong></span><span style="color:#ffffff"> attribute </span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff"> gamma</span><span style="color:#ffffff">;</span>
	<span style="color:#f0e68c"><strong>readonly</strong></span><span style="color:#ffffff"> attribute </span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff"> magneticHeading</span><span style="color:#ffffff">;</span>
	<span style="color:#f0e68c"><strong>readonly</strong></span><span style="color:#ffffff"> attribute </span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff"> trueHeading</span><span style="color:#ffffff">;</span>
	<span style="color:#f0e68c"><strong>readonly</strong></span><span style="color:#ffffff"> attribute </span><span style="color:#f0e68c"><strong>float</strong></span><span style="color:#ffffff"> headingAccuracy</span><span style="color:#ffffff">;</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

属性：

alpha: (float 类型 )以z方向为轴心的旋转角度
浮点数类型，只读属性，取值范围为0到360（不等于360）。
beta: (float 类型 )以x方向为轴心的旋转角度
浮点数类型，只读属性，取值范围为-180到180（不等于180）。
gamma: (float 类型 )以y方向为轴心的旋转角度
浮点数类型，只读属性，取值范围为-180到180（不等于180）。
magneticHeading: (float 类型 )设备方向与地球磁场北极方向的角度
浮点数类型，只读属性，取值范围为0到360（不等于360）。

平台支持
- Android - 2.2+ (支持)
- iOS - 4.3+ (支持) :
  iTouch、iPad设备不支持
trueHeading: (float 类型 )设备方向与地球真实北极方向的角度
浮点数类型，只读属性，取值范围为0到360（不等于360）。

平台支持
- Android - 2.2+ (支持)
- iOS - 4.3+ (支持) :
  iTouch、iPad设备不支持
headingAccuracy: (float 类型 )设备方向值的误差值
浮点数类型，只读属性，取值范围为0到360（不等于360）。

平台支持
- Android - 2.2+ (支持)
- iOS - 4.3+ (支持) :
  iTouch、iPad设备不支持

OrientationSuccessCallback

获取设备方向信息成功的回调函数

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onSuccess</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> rotation </span><span style="color:#ffffff">){</span>
	<span style="color:#87ceeb">// Get orientation success code.</span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

rotation: ( Rotation ) 必选 设备的方向信息Rotation

返回值：

void : 无

OrientationErrorCallback

获取设备方向信息失败的回调函数

<span style="background-color:#333333"><span style="color:#474747"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> onError</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> error </span><span style="color:#ffffff">)</span> <span style="color:#ffffff">{</span>
	<span style="color:#87ceeb">// Get orientation error code. </span>
<span style="color:#ffffff">}</span>
				</code></span></span>

参数：

error: ( Exception ) 必选 失败信息

返回值：

void : 无

低吟~浅唱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Orientation模块管理设备的方向信息，包括alpha、beta、gamma三个方向信息，通过plus.orientation可获取设备方向管理对象

Orientation模块管理设备的方向信息，包括alpha、beta、gamma三个方向信息，通过plus.orientation可获取设备方向管理对象
复制链接

扫一扫

专栏目录