快速入門：使用字串資源 (HTML)

發行項
01/28/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

將字串資源放入資源檔，並從 JavaScript 程式碼或 JavaScript 標記中參考這些字串。

指示

將字串放入資源檔中，而不是直接放入程式碼或標記當中。
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) 是說明字串的註解。註解是為負責將字串當地語系化成其他語言的譯者提供特殊指示的好位置。

將字串資源識別碼新增到程式碼和標記。

從您的 HTML 檔案新增 JavaScript 檔案的參考 (如果尚未新增)。(預設範本應該一律會產生這些；依據您使用的範本而定，預設 CSS 檔案的名稱可能會不同，但那對這個範例的目的而言並不重要)。
```

<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>
```

在隨 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); 
    } 
});

在 HTML 中，使用 data-win-res attribute 參考資源檔中使用資源識別碼 (greeting 和 farewell) 的字串資源。

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

以下示範如何在 JavaScript 中參考字串資源。

var el = document.getElementById('header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

附註和祕訣

data-win-res attribute 取代 HTML 的一般模式為 data-win-res="{propertyname1**: 'resource ID'、propertyname2: 'resource ID2'}"**。

如果資源字串不包含任何標記，並以純文字形式插入，請將資源繫結到 textContent 屬性，而非 innerHTML。在 DOM 內取代 textContent 屬性比取代 innerHTML 快。

您也可以使用 attributes: 做為屬性名稱。在此情況下，值不是具名的資源名稱，而是一個集合，其中的第一個值是屬性名稱，第二個值是您想要做為值使用的具名資源。例如：<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>。您可在應用程式資源和當地語系化範例的案例 9 中看到這個的範例。

如需新增其他語言和當地語系化的詳細資料，請參閱快速入門：翻譯 UI 資源。

共用方式為

快速入門：使用字串資源 (HTML)

指示

附註和祕訣

相關主題

其他資源