快速入门：确定设备方向 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

可以使用 SimpleOrientation 传感器和用 JavaScript 编写的应用确定设备方向。

此传感器不会返回如“portrait-up”或“landscape left”等属性，而是返回一个旋转值，如“Not rotated”、“Rotated90DegreesCounterclockwise”等。下表将常见的方向属性（“Portrait Up”等）映射到相应的传感器读取方向。

方向	相应的传感器读取方向
Portrait Up	NotRotated
Landscape Left	Rotated90DegreesCounterclockwise
Portrait Down	Rotated180DegreesCounterclockwise
Landscape Right	Rotated270DegreesCounterclockwise

目标: 完成此快速入门后，你将了解如何使用 SimpleOrientation 传感器检测设备方向。

先决条件

你应当熟悉 HTML、JavaScript 和事件。

你使用的设备或仿真器必须支持加速计。

完成所需时间: 15 分钟.

说明

1. 打开 Microsoft Visual Studio

打开 Visual Studio 的一个实例。

2. 创建新项目

创建新项目，从“JavaScript/应用商店应用”项目类型中选择“空白应用程序”****。

3. 替换 JavaScript 代码

打开你项目的 default.js 文件，并使用下列内容替换现有的代码。

// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var orientationSensor;
    var app = WinJS.Application;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onOrientationChanged(e) {
        switch (e.orientation) {
            case Windows.Devices.Sensors.SimpleOrientation.notRotated:
                id('txtOrientation').innerHTML = "Not Rotated";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 90";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 180";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 270";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.faceup:
                id('txtOrientation').innerHTML = "Face Up";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.facedown:
                id('txtOrientation').innerHTML = "Face Down";
                break;
            default:
                id('txtOrientation').innerHTML = "Undefined orientation " + e.orientation;
                break;
        }
    }



    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Retrieve the default orientation sensor
            orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

            // Set the event handler
            orientationSensor.addEventListener("orientationchanged", onOrientationChanged);
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. 为应用添加 HTML

打开 Windows 和 Windows Phone 项目的 default.html 文件，并将以下 HTML 复制到该文件的 BODY 标记内。


<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

5. 生成、部署并运行应用

按 F5 或选择“调试”>“启动调试”****来构建、部署并运行应用。

应用运行后，你可以通过迁移设备或使用仿真器工具更改加速计的值。

6. 停止应用

按 ALT+Tab 切换到 Visual Studio。
按 Shift+F5 或选择“调试”>“停止调试”****来停止应用。

摘要和后续步骤

前面的示例演示了，只需要写入极少的代码即可将简单方向传感器输入集成到你的应用。

该应用在 onactivated 函数中建立了与默认传感器的连接。这通过下面一行实现。

orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

在 onOrientationChanged 函数中捕获新传感器数据。每次传感器驱动程序从传感器接收到新数据时，它都将使用此函数（或事件处理程序）将此值传递到你的应用中。应用在下行中注册此事件处理程序。

orientationSensor.addEventListener("orientationchanged", onOrientationChanged);

通过对下面显示的 DOM 元素进行更新，将这些新值写到屏幕上。

<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

你可以使用 faceup 和 facedown 值确定何时保存状态信息和关闭应用。

你可以使用其他值更改屏幕方向。

请注意，faceup 和 facedown 值与象限或屏幕方向值互相排斥。

通过