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 : 无