快速入门：使用适用于 JavaScript 的 Windows 库添加应用设置

项目
12/11/2015

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

此快速入门逐步引导你使用 HTML 及适用于 JavaScript 的 Windows 库的 SettingsFlyout 类实现“设置”合约。

请将此操作功能视为我们的应用功能大全系列的一部分。: Windows 应用商店应用 UI 全解

介绍

在以下示例中，你将使用两个单独的 HTML 文件定义两个设置浮出控件：“默认值”和“帮助”。你将处理这些设置弹出窗口并使用 JavaScript 填充设置窗格。

先决条件

阅读应用设置指南。

1. 创建空白应用

创建一个 "Hello World" 空白应用，如“创建" Hello, world" 应用”中所述。你仅需完成前两个步骤：

在 Visual Studio 中创建新项目。
启动应用。

2. 定义“默认设置”浮出控件

还是在 Visual Studio 中，创建一个名为“DefaultSettings.html”的 HTML 文件：

在“解决方案资源管理器”窗格中，在 "HelloWorld" 解决方案下，右键单击项目“HelloWorld”。
选择“添加”****、“新文件夹。
将此新文件夹命名为 "html"。
右键单击该文件夹并选择“添加”、“新 HTML 文件...”****。
选择“HTML 页面”，输入名称 "DefaultSettings.html"，并单击“添加”****。

复制以下内容，并将其粘贴到新文件的内容上。


<!doctype HTML>
<html>
    <head>
        <title>App defaults Settings flyout</title>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
        <!-- Each Settings flyout should be defined in its own HTML file. -->
        <!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
        <!-- Set the background color for the header to the background color defined for your
             app tile in the manifest. -->
        <div id="defaultsDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App defaults Settings flyout"
                data-win-options="{settingsCommandId:'help',width:'narrow'}">
            <div class="win-header" style="background-color:#464646">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Defaults</div>
                <img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
            </div>
            <div class="win-content">
                {App defaults content goes here}
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>

3. 定义“帮助”浮出控件

在 "html" 文件夹下创建一个名为“HelpUI.html”的附加 HTML 文件。

复制以下内容，并将其粘贴到新文件的内容上。

<!doctype HTML>
<html>
    <head>
        <title>Help Settings flyout</title>
    </head>
    <body>
        <!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
        <!-- Each Settings flyout should be defined in its own HTML file. -->
        <!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
        <!-- Set the background color for the header to the background color defined for your
             app tile in the manifest. -->
        <div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
                data-win-options="{settingsCommandId:'help',width:'narrow'}">
            <div class="win-header" style="background-color:#464646">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Help</div>
                <img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
            </div>
            <div class="win-content">
                {Help content goes here}
            </div>
        </div>
        <!-- ENDTEMPLATE -->
    </body>
</html>

4. 填充“设置”窗格

通过将以下 JavaScript 添加到 default.js 中，处理“设置”浮出控件并填充“设置”窗格。将新代码放置在 onactivated 函数内，以便在你的 DOM 初始化后运行它。


    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());

            // BEGIN BLOCK OF NEW CODE
            // Populate Settings pane and tie commands to Settings flyouts.
            WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = {
                    "defaultsDiv": { href: "html/DefaultSettings.html", title: "App defaults" },
                    "helpDiv": { href: "html/HelpUI.html", title: "Help" }
                };
                WinJS.UI.SettingsFlyout.populateSettings(e);
            }
            // END OF BLOCK

        }
    };

摘要

在本快速入门中，你学习了使用 HTML 和 WinJS 设置“设置”合约。

通过