快速入门：添加应用帮助 (HTML)

项目
12/11/2015

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

此快速入门向你显示如何使用 HTML 及 Windows JavaScript 库 (WinJS) 的 SettingsFlyout 对象将“帮助”浮出控件添加到“设置”窗格。要在完整应用中查看“帮助”浮出控件，请参阅应用设置示例。

在以下示例中，你将在 HTML 文件 (HelpUI.html) 中定义称为“帮助”的“设置”浮出控件。然后，你将使用 JavaScript 初始化该“设置”浮出控件并填充“设置”窗格。

**使用 C#/Visual Basic/C++ 和 XAML？**请参阅Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)。

先决条件

请阅读应用帮助指南和应用设置指南。

说明

1. 定义“帮助”付出控件

创建名为 "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 data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create 
         a wide flyout. -->
    <!-- Set the background color for the header to the background color defined
         for your app tile in the manifest. -->
    <div data-win-control="WinJS.UI.SettingsFlyout"
         data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
        <div class="win-ui-dark win-header" title="Help">
            <button type="button" 
                    onclick="WinJS.UI.SettingsFlyout.show()"
                    class="win-backbutton"></button>
            <div class="win-label">Help</div>
        </div>
        <div class="win-content">
            <!-- Help content here -->
        </div>
    </div>
    <!-- ENDTEMPLATE -->
</body>
</html>

注意默认情况下，该浮出控件宽度会"较窄" (346px)。设置 data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" 以创建较宽的浮出控件 (646px)。

2. 处理“设置”浮出控件并填充“设置”窗格。

以下代码可使用 JavaScript 处理“设置”浮出控件并填充 SettingsPane。激活你的应用时，调用此函数。

function initializeSettings() {
    // Initialize Settings flyout(s) and WinJS controls.
    WinJS.UI.processAll();
    
    // Populate Settings pane and tie commands to Settings flyouts.
    WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = {
            "helpDiv": { href: "HelpUI.html", title: "Help"}
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
    WinJS.Application.start();
}

注意应该在 DOM 初始化后调用此函数。但如果你从 onactivated 函数调用 initializeSettings，则无需担心 DOM 初始化；activated 事件将在 DOMContentLoaded 事件之后发生。有关详细信息，请参阅优化你的应用的生命周期（使用 JavaScript 和 HTML 的 Windows 应用商店应用）。

摘要和后续步骤

在此快速入门中，你学习了如何使用 HTML 和 Windows JavaScript 库向“设置”窗格添加应用帮助。

接下来，你可以学习如何使用 IFrame 在帮助页面中包括联机帮助。

如何在你的帮助中包括联机内容

通过

快速入门：添加应用帮助 (HTML)

先决条件

说明

1. 定义“帮助”付出控件

2. 处理“设置”浮出控件并填充“设置”窗格。

摘要和后续步骤

相关主题

其他资源