快速入門：決定裝置方向 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

您可以在使用 JavaScript 撰寫的應用程式中使用 SimpleOrientation 感應器來決定裝置方向。

這個感應器不會傳回如 "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 值互斥。

共用方式為