快速入门：翻译 UI 资源 (HTML)

项目
01/28/2016

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

将你的 UI 中的字符串资源放入资源文件中。随后你可从代码或标记引用这些字符串。

说明

将字符串放入资源文件中，而不是直接将它们放入代码或标记中。
1. 在 Visual Studio 中打开 package.appxmanifest，转到“应用程序”选项卡，将你的默认语言设置为 "en-US"。如果这是一个通用应用，请在你的解决方案中为每个 package.appxmanifest 执行该操作。注意这将为项目指定默认语言。如果用户的首选语言或显示语言与应用程序中提供的语言资源不匹配，将使用默认语言资源。请参阅属性页，JavaScript。
2. 创建用于包含资源文件的文件夹。
  1. 在解决方案资源管理器中，右键单击项目（如果这是通用应用，则为“共享”项目）并选择“应用”>“新建文件夹”****。
  2. 将新文件夹命名为“"strings"”。
  3. 如果没有在解决方案资源管理器中看见新文件夹，请在选中该项目时从 Microsoft Visual Studio 菜单中依次选择“项目”>“显示所有文件”****。
3. 创建一个子文件夹和用于英语（美国）语言的资源文件。
  1. 右键单击“strings”文件夹，并在它下面添加新文件夹。将它命名为“"en-US"”。文件夹中放置的资源文件已针对 BCP-47 语言标记命名。请参阅如何使用限定符命名资源，了解关于语言限定符以及常用语言标记列表的详细信息。
  2. 右键单击“en-US”文件夹，然后选择“添加”>“新建项”…。
  3. 选择“"资源文件 (.resjson)"”。
  4. 单击“添加”。将添加一个资源文件，默认名称为 resources.rejson。建议使用该默认文件名。虽然应用可能会在其他文件内将其资源分区，但你必须谨慎地正确引用它们（请参阅如何加载字符串资源）。
  5. 新文件包含默认的内容。使用以下内容（可能与默认内容十分相似）替换该内容：
    
    strings/en-US/resources.resjson
```
{
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}
```
    这是严格的 JavaScript 对象表示法 (JSON) 语法，其中每个名称/数值对后面都必须放置一个逗号（最后一对除外）。在此示例中，"greeting" 和 "farewell" 将标识要显示的字符串。其他名称/数值对（"_greeting.comment" 和 "_farewell.comment"）是用于描述字符串的注释。注释是为将字符串本地化为其他语言的翻译人员提供任何特殊说明的理想位置。
向代码和标记中添加资源标识符。
1. 将指向适用于 JavaScript 的 Windows 库的引用添加到你的 HTML 文件（如果文件中还没有这些引用）。
  
  注意以下代码展示了 Windows 项目的 default.html 文件的 HTML，你在 Visual Studio 中创建新的“空白应用程序”（通用应用）项目时生成了该项目。请注意，该文件已经包含了对于 WinJS 的引用。
```

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
```
  注意以下代码展示了 WindowsPhone 项目的 default.html 文件的 HTML，你在 Visual Studio 中创建新的“空白应用程序”（通用应用）项目时生成了该项目。请注意，该文件已经包含了对于 WinJS 的引用。
```

<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
```
2. 在 HTML 文件附带的 JavaScript 代码中，当加载 HTML 时调用 WinJS.Resources.processAll 函数。
```
WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}
```
  如果将其他 HTML 加载到 WinJS.UI.Pages.PageControl 对象，则在页面控件的 IPageControlMembers.ready 方法中调用 WinJS.Resources.processAll(element)，其中 element 是要加载的 HTML 元素（及其子元素）。下例基于应用程序资源和本地化示例的方案 6：
```
var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});
```
3. 在 HTML 中，使用资源标识符（“greeting”和“farewell”）引用资源文件中的字符串资源。
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```
4. 引用针对属性的字符串资源。
```
<div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
```
5. 引用 JavaScript 中的字符串资源。
```
var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);
```
用于 HTML 替换的 data-win-res 属性的一般模式为 data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}"。

注意如果字符串不包含任何标记，则尽可能将资源绑定到 textContent 属性（而非 innerHTML）。textContent 属性比 innerHTML 的替换速度快得多。
为其他两种语言添加文件夹和资源文件。
1. 在“strings”文件夹下为德语添加一个文件夹。将德语（德国）的文件夹命名为 "de-DE"。
2. 在“de-DE”文件夹中创建另一个 Resources.rejson 文件，并用下列内容替换文件中的内容：
  
  strings/de-DE/resources.resjson
```
{
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}
```
3. 为法语（法国）创建另一个文件夹，命名为 "fr-FR"。创建一个新的 Resources.rejson 文件，使用下列内容替换文件中的内容：
  
  strings/fr-FR/resources.resjson
```
{
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}
```
构建并运行应用。

为默认显示语言测试应用。
1. 按 F5 来构建并运行此应用。
2. 请注意，“greeting”和“farewell”以用户的首选语言显示。
3. 退出应用。
注意仅限 Windows 应用商店应用。测试应用的其他语言。
1. 打开控制面板，选择“时钟、语言和区域”>Language“语言”。
2. 请注意，运行应用时显示的语言是列出的最顶端语言，即英语、德语或法语。如果你的最顶端语言不是这三者之一，则应用将采用应用支持的语言列表中的下一种语言。
3. 如果你的计算机上没有这三种语言，通过单击“添加语言”来将这些语言添加到列表中。
4. 若要测试应用的其他语言，请选中列表中的语言，然后单击“上移”****，直到它移到列表顶端。然后运行应用。
注意仅限 Windows Phone 应用商店应用。测试应用的其他语言。
1. 在手机（或手机仿真器）上显示“设置”。
2. 选择“语言”****。
3. 请注意，运行应用时显示的语言是列出的最顶端语言，即英语、德语或法语。如果你的最顶端语言不是这三者之一，则应用将采用应用支持的语言列表中的下一种语言。
4. 如果你的手机上没有这三种语言，通过点击“添加语言”并将其添加到列表来添加缺少的语言。
5. 若要使用其他语言测试应用，请长按列表中的语言，然后点击“上移”****，直到它移到列表顶端。然后，重置手机并运行该应用。

快速入门：翻译 UI 资源 (HTML)

说明

相关主题

其他资源