学步园

原教程链接：创建第一个采用 JavaScript 的 Windows 应用商店应用

注：本学习笔记为对该教程的一些注解，并不提供完整的实例代码，如果需要学习完整的开发过程请参阅原教程。

部分 1：创建“Hello, world”应用（使用 JavaScript 和 HTML 的 Windows 应用商店应用）

一、Windows应用商店应用html5例外元素：

我们来向 default.html 文件中添加一些新的内容。正如你向任何其他 HTML 文件中添加内容一样，你在 body 元素内添加内容。你可以使用 HTML5 元素创建应用（具有少数例外）。 这表示你可以使用 HTML5 元素，如 h1、p、button、div 以及 img。

关于html5元素，可以参照这里，文中提及的html例外元素，可以结合比较官方文档中的html support得出：（注，某些元素被单独列出，这包括：<canvas>，）

• 没有提到<bdo>、<command>、<details>、<dfn>、<keygen>、<menu>、<meter>、<noscript>、<rp>、<summary>
• 增加了<custom>、<hn>
• 支持了html5不支持的元素<s>、<u>
• <h1>to<h6>未列出但实际是支持的。

注：以上并未在实际生产环境中验证，请自行斟酌。

二、代码详解：

WinJS.Binding.optimizeBindingReferences = true;

设置WinJs.Binding命名空间的属性optimizeBindingReferences的值为true。

该属性决定是否要自动设置元素的ID。（true——避免自动设置元素ID）查看更多

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

定义变量app为命名空间WinJS.Application的引用（对JavaScript来说“命名空间”也是对象）

该命名空间提供了应用程序功能性的对象、方法、函数和事件集。查看更多

定义变量activation为命名空间Windows.ApplicationModel.Activation的引用。

app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function completed() {

                // Retrieve the div that hosts the Rating control.
                var ratingControlDiv = document.getElementById("ratingControlDiv");

                // Retrieve the actual Rating control.
                var ratingControl = ratingControlDiv.winControl;

                // Register the event handler. 
                ratingControl.addEventListener("change", ratingChanged, false);

                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);

            }));

        }

app.onactivated = ...

为应用的"activated"事件绑定处理函数。"activated"事件在应用被激活的时候被触发。

参数args是一个CustomEvent object对象。

args.detail.kind === activation.ActivationKind.launch;

CustomEvent object的detail属性：描述一个事件的额外信息

这里该参数可以认为是一个"activated"类型的对象.而detail是如下对象之一：

args.setPromise(WinJS.UI.processAll().then(function completed(){...}

ratingControl.addEventListener("change", ratingChanged, false);

function ratingChanged(eventInfo) {
        var ratingOutput = document.getElementById("ratingOutput");
        ratingOutput.innerText = eventInfo.detail.tentativeRating; 
}

app.start();