快速入门：翻译 UI 资源（使用 JavaScript 和 HTML 的 Windows 应用商店应用）

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

说明

1. 将字符串放入资源文件中，而不是直接将它们放入代码或标记中。
   1. 在 Microsoft Visual Studio 中打开 package.appxmanifest，转到“应用程序 UI”选项卡，将你的默认语言设置为 "en-US"。

      注意  这将为项目指定默认语言。如果用户的首选语言或显示语言与应用程序中提供的语言资源不匹配，将使用默认语言资源。请参阅属性页，JavaScript。

   2. 创建一个文件夹，用于包含资源文件。
      1. 在“解决方案资源管理器”中，右键单击项目并选择“添加” > “新建文件夹”。
      2. 将这个新文件夹命名为 "strings"。
      3. 如果在“解决方案资源管理器”中看不到这个新文件夹，请在选中项目的情况下，从 Visual Studio 菜单中选择“项目” > “显示所有文件”。
   3. 创建一个子文件夹和一个用于英语（美国）的资源文件。
      1. 右键单击 strings 文件夹，在它的下面添加一个新文件夹。将新文件夹命名为 "en-US"。该资源文件放在根据 BCP-47 语言标记命名的文件夹中。请参阅如何使用限定符命名资源，了解语言限定符的详细信息和一组常见的语言标记。
      2. 右键单击 en-US 文件夹并选择“添加” > “新项”…。
      3. 选择“资源文件 (.resjson)”""。
      4. 单击“添加”。这将添加一个资源文件，它的默认名称为 Resources.rejson。建议使用该默认文件名。应用可将它们的资源分区到其他文件中，但必需注意正确地引用它们（请参阅如何加载字符串资源）。

      5. 新文件包含默认的内容。将该内容替换为以下内容（可能非常类似于默认内容）：

         strings/en-US/resources.resjson

         json

         复制

         
         {
             "greeting"              : "Hello",
             "_greeting.comment"     : "A welcome greeting.",
         
             "farewell"              : "Goodbye",
             "_farewell.comment"     : "A goodbye."
         }
         
         

         这是一种严格的 JavaScript 对象表示法 (JSON) 语法，其中必需在每个名称/值对后面放一个逗号，最后一个除外。在此示例中，"greeting" 和 "farewell" 标识了要显示的字符串。其他对（"_greeting.comment" 和 "_farewell.comment"）是描述字符串的注释。这些注释是向将字符串本地化为其他语言的翻译者提供特殊说明的不错地方。

2. 向代码和标记中添加资源标识符。
   1. 将指向适用于 JavaScript 的 Windows 库的引用添加到你的 HTML 文件（如果文件中还没有这些引用）。
      HTML

      复制

      
      <!-- WinJS references -->
      <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
      <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
      
      
      

      此示例展示了你在 Microsoft Visual Studio Express 2012 for Windows 8 中创建新的“空白应用程序”项目时生成的 Default.html 文件的 HTML。请注意，该文件已经包含了对于适用于 JavaScript 的 Windows 库的引用。

   2. 在 HTML 文件附带的 JavaScript 代码中，当加载 HTML 时调用 WinJS.Resources.processAll 函数。

      JavaScript

      复制

      
      WinJS.Application.onloaded = function(){
          WinJS.Resources.processAll();
      }
      
      
      

      如果将其他 HTML 加载到 WinJS.UI.Pages.PageControl 对象，则在页面控件的 IPageControlMembers.ready 方法中调用 WinJS.Resources.processAll(element)，其中 element 是要加载的 HTML 元素（及其子元素）。下例基于应用程序资源和本地化示例的方案 6：

      JavaScript

      复制

      
      var output;
      
      var page = WinJS.UI.Pages.define("/html/scenario6.html", {
          ready: function (element, options) {
              output = document.getElementById('output');
              WinJS.Resources.processAll(output); // Refetch string resources
              WinJS.Resources.removeEventListener("contextchanged", refresh, false);
              WinJS.Resources.addEventListener("contextchanged", refresh, false);
          }
      });
      
      

   3. 在 HTML 中，使用资源标识符（“greeting”和“farewell”）引用资源文件中的字符串资源。
      HTML

      复制

      
      <h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
      <h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
      
      
      

   4. 引用针对属性的字符串资源。
      HTML

      复制

      
      <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >
      
      

   5. 引用 JavaScript 中的字符串资源。
      JavaScript

      复制

      
      var el = document.getElementById('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 的替换速度快得多。

3. 为其他两种语言添加文件夹和资源文件。
   1. 在“strings”文件夹下为德语添加一个文件夹。将德语（德国）的文件夹命名为 "de-DE"。

   2. 在“de-DE”文件夹中创建另一个 Resources.rejson 文件，并用下列内容替换文件中的内容：

      strings/de-DE/resources.resjson

      json

      复制

      
      {
          "greeting"              : "Hallo",
          "_greeting.comment"     : "A welcome greeting.",
      
          "farewell"              : "Auf Wiedersehen",
          "_farewell.comment"     : "A goodbye."
      }
      
      

   3. 为法语（法国）创建另一个文件夹，命名为 "fr-FR"。创建一个新的 Resources.rejson 文件，使用下列内容替换文件中的内容：

      strings/fr-FR/resources.resjson

      json

      复制

      
      {
          "greeting"              : "Bonjour",
          "_greeting.comment"     : "A welcome greeting.",
      
          "farewell"              : "Au revoir",
          "_farewell.comment"     : "A goodbye."
      }
      
      

4. 构建并运行应用。

   为默认显示语言测试应用。

   1. 按 F5 来构建并运行此应用。
   2. 请注意，“greeting”和“farewell”以用户的首选语言显示。
   3. 退出应用。

   测试应用的其他语言。

   1. 打开控制面板，选择“时钟、语言和区域”>Language“语言”。
   2. 请注意，运行应用时显示的语言是列出的最顶端语言，即英语、德语或法语。如果你的最顶端语言不是这三者之一，则应用将采用应用支持的语言列表中的下一种语言。
   3. 如果你的计算机上没有这三种语言，通过单击“添加语言”来将这些语言添加到列表中。
   4. 若要测试应用的其他语言，请选中列表中的语言，然后单击“上移”，直到它移到列表顶端。然后运行应用。

相关主题

如何使用限定符命名资源

如何加载字符串资源

WinJS.Resources.processAll

应用程序资源和本地化示例

属性页，JavaScript

BCP-47 语言标记