新型应用程序

2015-07-06

Windows 8.1 中为 Windows 应用商店开发者提供的新功能

Rachel Appel Windows 8.1 是 Windows 操作系统的重大更新，其中有许多新增强功能和新功能，可帮助您创新，构建最具创新性的应用程序。在本文中，我将探讨 Windows 8.1 中为开发者构建 Windows 应用商店的应用提供的新增强功能。

新的 Visual Studio 2013 项目模板可帮助您构建新型应用程序

正如您预料的，每次 Visual Studio 发布都会带来新的项目模板。使用 JavaScript（使用 Windows JavaScript 库或 WinJS）项目模板构建的新型 Windows 应用商店的应用包含中心模板，而新的 XAML 项目模板包含中心、可移植类库和编码的 UI 测试。

WinJS 和 XAML 中的新中心项目模板采用了我称为“新型”的流行设计方法。其默认布局包含的五个不同部分都经过精心设计，以便您能够为用户提供不同的可视化数据排列。中心布局可使用户更轻松地扫描和查找对他们重要的内容。设计新型 UI 意味着您采用与先前非新型传统方法不同的方式呈现数据，重点放在用户和可用性上。中心项目就是这样。

中心项目的页面文件夹中有三个文件夹，名为 hub、item 和 section。其中每一个均有自己的相应 .html、.js 和 .css 文件。在 XAML 项目中，根文件夹中相应的页面名为 HubPage.xaml、SectionPage.xaml 和 ItemPage.xaml。图 2 显示了具有中心控件的中心项目在运行时的外观。

The Hub Project at Run Time

图 2：运行时的中心项目

可以看到，中心项目和控件显示内容排列得很美观的全景视图。这是非常时尚的新型设计。

面向新型 UI 的更新和新型 HTML 和 XAML 控件

所有项目类型中的新控件和控件改进使它们更易于使用。这些新增和更新的控件使新型应用程序的创建和发布比以往更加轻松。在 HTML 和 XAML 中，都有性能和数据绑定控件增强。有关 Windows 应用商店控件的入门指导，请参阅我的 MSDN 杂志文章“精通用 JavaScript 构建的 Windows 应用商店应用中的控件和设置”msdn.microsoft.com/magazine/dn296546。

对于 WinJS 和 XAML 而言，中心项目模板中都有新增的中心控件。默认模板的中心控件以五个可水平滚动的部分构成 UI 布局，这些都在应用程序开始页面中。横幅部分是应用程序皇冠上的明珠，通常用于呈现专题新闻故事、配方、赛事比分、天气数据或任何可能的信息。这也是在初始屏幕之后用户首先看到的内容。作为开发者的起点，后面四个部分仅包含不同大小的数据项。用户可导航到第 3 部分的组成员关系列表，或者第 3 部分中的各项。当然，中心控件非常灵活，能够容纳包含任何内容的任何数量的部分。它可轻松处理不同类型和不同来源的异类内容，而不是相同来源的类似数据的严格同类内容。

网格模板仅依赖 ListView 控件。现在新的中心控件包含一个嵌入式 ListView 控件，因此可以按预期导航，根据用户点击或单击的项，可导航到组列表或单个项。

ListView 有许多新型增强功能，包括支持拖放操作。除拖放功能外，还有用于重新排序项的 ListView 增强功能。只需将 ListView 的 itemsReorderable 属性设置为 true，无需其他代码。ListView 包含几个其他增强功能，包括改进的单元格跨距、更好的可访问性和更好的内存管理。

尽管 ListView 控件有许多精彩的新功能，还有一个控件应该提一下：Repeater。Microsoft .NET Framework 中的几个 UI 控件使用重复控件。例如，有 ASP.NET Repeater 控件。网格控件等存在于整个 .NET 平台中，它们根据您能够使用 .NET Framework 构建 UI 的不同方式进行自定义。可以预见，您可以使用 Repeater 控件生成样式来自数据集的项列表。在 WinJS 中，这意味着 Repeater 将正确呈现几乎任何嵌入式 HTML 或 WinJS 控件。图 3 显示了 Repeater 控件的一个示例。注意，除了不再需要组外，其工作方式非常像 ListView。如图 3 的示例数据所示，JavaScript 创建另一个简单数组。

图 3：构建简单 Repeater 控件的 HTML 和 JavaScrip

    <!—HTML -- >
    <div id="listTemplate" data-win-control="WinJS.Binding.Template">
      <li data-win-bind="textContent: title"></li>
    </div>
    <ul data-win-control="WinJS.UI.Repeater"
      data-win-options="{data: RepeaterExample.basicList,
      template: select('#listTemplate')}">
    </ul>
    // JavaScript
    (function () {
      "use strict";
      var basicList2 = new WinJS.Binding.List(
        [
          { title: "Item 1" },
          { title: "Item 2" },
          { title: "Item 3" },
          { title: "Item 4" }
        ]);
      WinJS.Namespace.define("RepeaterExample",
        {
          basicList: basicList2
        });
    })();

NavBar 是改进 UX 的另一个控件，它通过有益于用户交互的方式提供菜单选项。与过去流行网站上的 JavaScript 菜单不同，新型菜单项较大，针对各种输入设备进行了优化。我们都曾看过鼠标使用不熟练的人费力地点击过去那些微小的级联网站菜单。这意味着，作为新型应用程序 UI 设计原则的一部分，NavBar 能够很好地适应触摸输入，触摸输入是平板电脑的必备功能。利用 Windows 键+Z 快捷方式或者右键单击，用户可通过自上而下轻扫边缘调用导航工具栏。如果您用过 AppBar 控件，NavBar 控件的工作方式几乎相同。

如果需要将新型网站与客户端应用程序相集成，可使用新的 WebView 控件。与以前使用 iframe 的 WinJS 版本相比，它能够更方便地从 Internet 呈现数据。WebView 控件是 HTML 元素，如下所示：

    <x-ms-webview id="webview" src="http://rachelappel.com"
      style="width: 400px; height: 400px;"></x-ms-webview>

这不同于通过使用 <div> 元素以及设置 data-win-options 属性来创建 WinJS 控件的标准方式。WebView 控件作为托管外部内容的容器。这不仅具有安全性和沙盒含义，在这种情况下使用 HTML 元素比一般控件更有效。WebView 不是用其他 HTML 元素可实现的控件，它必须在应用程序主机上直接受支持。注意，目前正在建议将 <webview> 元素作为万维网联盟 (W3C) 考虑的标准。

在此 Windows 版本发布前，只要涉及控件，XAML 不完全等同于 HTML。但现在，通过添加以下新控件，XAML 已经赶了上来：

AppBar：横跨屏幕底部的菜单栏。
CommandBar：单独菜单栏项。
DatePicker：从用户那里捕获日期的一组三个下拉菜单。
弹出窗口：无模式、轻量接触对话框或设置控件。
中心：可用于显示组中不同大小的项的全景图。
Hyperlink：导航到 URI 的超链接。
MenuFlyout：采用特定样式、可显示菜单项列表的预定义弹出窗口。
SettingsFlyout：在用户轻扫屏幕或交互时从屏幕右侧出现的弹出窗口。它用于管理应用程序设置。
TimePicker：供用户选择小时、分钟、秒和其他时间段的控件。它通常补充 DatePicker。

现在 XAML 开发者不太需要创建自己的可视元素，因为许多元素现在是 UI 框架的一部分。

Windows 8.1 在搜索方面具有更多选择

Windows 8 引入了超级按钮概念 — 转到常用任务的快捷方式。用户有自己的习惯，像启动应用程序或查找信息那样进行搜索就是一个常见习惯。用户经常搜索信息，搜索引擎结果会证明这一点。搜索是非常重要的计算部分，以致于它成为 Windows 操作系统的一部分，现在有一个搜索控件为超级按钮提供了补充。如果有用户能搜索的应用程序本地数据时，可使用 SearchBox 控件，如果需要进行范围更广的或 Internet 搜索时，可以使用 SearchPane（Windows 8 中引入的“搜索 Windows”超级按钮）。在声明选项卡的 package.appmanifest 中配置了搜索合约后，您可以为用户提供搜索服务。您的应用程序中可以用 SearchBox 或 SearchPane，但不能同时使用二者。

可以预见，添加 SearchBox 控件就像将 data-win-control 属性应用到 WinJS.UI.SearchBox 一样方便：

<div id="searchBoxId"
  data-win-control="WinJS.UI.SearchBox"
  data-win-options="{focusOnKeyboardInput: true}">
</div>

XAML 将 SearchBox 类定义保存在 Windows.UI.Xaml.Controls 命名空间中，声明性语法如下所示：

<SearchBox x:Name="SearchBox"
  FocusOnKeyboardInput="True"
  QuerySubmitted="SearchBox_QuerySubmitted"
  Height="35" />

Microsoft 建议将即时搜索添加到您的应用程序中。即时搜索是用户一键入就会激活和启动搜索查询的搜索。转到 Windows 8“开始”屏幕，开始键入。可以看到，SearchPane 在设备中以及 Internet 上立即启动搜索查询。当然，您可以像前面的代码示例一样，通过将 HTML data-win-option 属性设置为 focusOnKeyboardInput 或者将 XAML FocusOnKeyboardInput 值设置为 True，在应用程序中模拟此行为。

使用联系人和日历 API 保持联系和最新状态

使用 Windows 8.1，如果用户允许，您可以获得方便的 API 与用户的联系人和日历进行交互。通过联系人 API，源应用程序可按电子邮件地址或电话号码查询数据存储，为用户提供相关信息。通过日历 API 可添加、替换、删除或者使用约会，可以在运行时在应用程序旁的屏幕上显示用户的默认约会提供商应用程序（例如内置日历应用程序或 Outlook）。这意味着您的应用程序可与内置应用程序无缝集成。

在联系人 API 中，Windows 8.1 使用 Windows.ApplicationModel.Contacts.Contact 类表示联系人，Windows 8 中使用的较旧 ContactInformation 类已弃用。幸运的是，API 文档清楚标记了已弃用命名空间的每个成员，并且显示以下消息：“对于 Windows 8.1 以后的版本，<member name> 可能会变更或不可用”，因此可轻松避免使用它们。图 4 显示了捕获电子邮件地址和电话号码是多么方便，并且根据这些数据显示用户联系卡。稍微添加一点代码，就可以在应用程序的其他部分保存或显示联系人。

图 4 显示联系卡

<label for="emailAddressInput">Email Address</label>
<input id="emailAddressInput" type="text"/>
<label for="phoneNumberInput">Phone Number</label>
<input id="phoneNumberInput" type="text" />
<button id="addToContactsButton" onclick=
  "addContactWithDetails()">Add to Contacts</button>
function showContactWithDetails() {
  var ContactsAPI = Windows.ApplicationModel.Contacts;
  var contact = new ContactsAPI.Contact();
  var email = new ContactsAPI.ContactEmail();
  email.address = document.querySelector("#emailAddressInput");
  contact.emails.append(email);
  var phone = new ContactsAPI.ContactPhone();
  phone.number = document.querySelector("#phoneNumberInput");
  contact.phones.append(phone);
  ContactsAPI.ContactManager.showContactCard(
    contact, {x:120, y:120, width:250, height:250},
    Windows.UI.Popups.Placement.default);
}

可以看到，联系人 API 易于使用，并且可与 Windows 进行更深层集成。日历 API 非常类似。在代码中，创建约会对象的实例，为表示会议详细信息 — 如会议的日期和时间 — 的属性赋值，然后保存它们。这样，应用程序就具备了联系人和日历功能。

新的网络和安全 API

没有网络和安全方面的改进，任何系统更新都是不完整的。有了这些网络增强功能，您可以通过代码执行比以前更多的操作，同时保持安全。在 Windows 运行时 (WinRT) 中，Windows.Web.Http 命名空间新增了可连接到 HTTP 和 REST 服务的对象和方法，与以前使用 WinJS.xhr 和 System.Net.HttpClient 等的 API 相比，这些服务功能更强，灵活性更高。以下代码显示如何连接到 RESTful 服务：

var uri = new Uri("http://example.com/data.svc");
var httpClient = new HttpClient();
httpClient.GetStringAsync(uri).done(function () {
  // Process JSON
}, error);
function error(reason) {
  WinJS.log && WinJS.log("Oops!");
}

和其他任何库一样，Windows.Web.Http 命名空间有异步执行自己任务的成员，对于 JavaScript，这意味着使用在返回 promise 时运行的“done”函数。不过，如果需要最新实时应用程序，您可以将 Windows.Web.Http 用于在后台运行的备用应用程序。另外请注意，您可以使用 Windows.Web.Http 的各种其他功能（如控制缓存、控制 Cookie、进行其他类型的请求，以及将筛选器插入管道），以执行我们在此无法一一探讨的各种有趣操作。

好消息是，如果访问需要用户凭据的 REST 服务，您（作为用户）现在可将它们作为“设置”超级按钮中的多个帐户进行管理。除这些安全和帐户管理功能外，在使用 Windows 指纹（生物）身份验证 API 的新型应用程序中，还有使用指纹身份验证的选项。

新型应用程序与种类繁多的设备密切相关

最新的莫过于 3D 打印。Windows 8.1 有这个功能，您可以利用它进行开发！更不用说目前提供的具有硬件和传感器功能的 API 产品目录了，其中包括：

人机接口设备 (HID)：促进软硬件之间通信和可编程性的协议。
服务点 (PoS)：与供应商无关的 Windows 应用商店应用 API，可用于访问条形码扫描仪或磁条阅读器等设备。
USB：支持与标准 USB 设备的通信。
蓝牙：支持与标准蓝牙设备的通信。
3D 打印：这些是 2D 打印支持的 C++ 扩展，是实现 3D 打印机支持的基础。您可以通过应用程序访问 Windows 打印，将 3D 格式化内容发送到打印机。
扫描：实现对扫描仪的支持。

上述 API 均支持硬件外设集成。但自 Windows 8 起，HTML 和 XAML 应用程序都已能够利用硬件集成来使用网络摄像头、加速度传感器、笔、触控设备和其他外设。

Windows 8.1 包含一组语音合成或文本到语音转换 API。通过使用这些 API，您可以将文本数据转变成语音流 — 需要的代码比您可能预计的要少。例如，以下代码示例显示一旦存在 SpeechSynthesizer 的新实例，您就可以调用其 synthesizeTextToStreamAsync 方法。synthesizeTextToStreamAsync 方法接受文本数据，将这些数据转换为语音流，然后将语音流发送到播放器：

var audio = new Audio();
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
var input = document.querySelector("#input");
synth.synthesizeTextToStreamAsync(input).then(function (markersStream) {
  var blob = MSApp.createBlobFromRandomAccessStream(
    markersStream.ContentType, markersStream);
  audio.src = URL.createObjectURL(blob, { oneTimeOnly: true });
  audio.play();
});

除使用简单文本数据外，您还可以使用 W3C 标准语音合成标记语言 (SSML) 进行语句构建和词法说明。通过这种基于 XML 的语言，您可以以更明确定义的方式执行输入和输出合成，这对用户具有重要意义。

新增应用商店打包功能总结

您可以配置包清单中的资源，如磁贴图像和本地化字符串，包清单已进行了略微更改，以便体现新图像大小和其他配置选项。一个此类选项是创建捆绑包。捆绑包主要用于添加和管理特定于区域设置的信息，以便您能够将您的应用程序部署到不同的地理区域。

当您将您的应用程序部署到应用商店时，请注意有一些变化，包括开发者门户上的增强 UI。现在必应简洁地集成到了操作系统中，用户能够比以往更方便地查找您的应用程序。有了必应集成，用户可以通过 Windows 应用商店或者通过网站或搜索发现您的应用程序（或任何文件）。此外，用户现在安装的应用程序将自动更新，除非用户禁用了自动更新功能。您不必担心代表用户进行的频繁应用程序更新。

本文无法一一列出 Windows 运行时和 Visual Studio 中的所有新增和增强的功能。我强烈建议您查看其他新功能，如 DirectX，它支持几个更新，您可以在 bit.ly/1nOp0Ds 阅读相关信息。此外，Charles Petzold 还为侧重 DirectX 的 MSDN 杂志专栏撰文，您可以在 (bit.ly/1c37bLI) 查看有关新功能的更多详细信息。最后，有关在 Windows 8.1 中有哪些新增内容的所有信息，请参见“Windows 8.1 功能指南”bit.ly/1cBHgxu。

Rachel Appel* 是一名顾问、作家、导师和前 Microsoft 员工，在 IT 行业有 20 多年的经验。她常在 Visual Studio Live!、DevConnections、MIX 等顶级行业大会上发言。她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。有关 Appel 的详细信息，请访问她的网站 rachelappel.com。*

衷心感谢以下技术专家对本文的审阅：Kraig Brockschmidt (Microsoft)

通过