《创建第一个采用 JavaScript 的 Windows 应用商店应用》学习笔记（一）

原教程链接：创建第一个采用 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是如下对象之一：

• WebUICachedFileUpdaterActivatedEventArgs
• WebUICameraSettingsActivatedEventArgs
• WebUIContactPickerActivatedEventArgs
• WebUIDeviceActivatedEventArgs
• WebUIFileActivatedEventArgs
• WebUIFileOpenPickerActivatedEventArgs
• WebUIFileSavePickerActivatedEventArgs
• WebUILaunchActivatedEventArgs
• WebUIPrintTaskSettingsActivatedEventArgs
• WebUIProtocolActivatedEventArgs
• WebUISearchActivatedEventArgs
• WebUIShareTargetActivatedEventArgs

  
  

  对于一般情况，这里的detail是WebUILauchActivatedEventArgs对象。

  它的kind属性值为activation.ActivationKind.launch。

  Windows.ApplicationModel.Activation.ActivationKind是一个枚举类型。
  

  previousExecutionState属性是一个只读属性，得到app的这次激活之前的执行状态。
  

  Windows.ApplicationModel.Activation.ApplicationExecutionState是一个枚举类型。
  

  
  

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

  
  

  WinJS.UI.processAll()将扫描html中是否有windows控件，并将其初始化。这是一个异步方法。

  这样如果直接在onactivated的处理中进行控件的绑定，将有可能在控件初始化之前执行绑定。

  另外onactivated也有可能在WinJS.UI.processAll()执行完之前执行完毕。

  所以要将WinJS.UI.processAll()放在setPromise中执行以在其执行完后收到Promise通知，这是onactivated的处理才被认为执行完。

  WinJS.UI.processAll()返回一个Promise对象，它的then方法接受completed函数参数，在WinJS.UI.processAll()完成后执行。
  

  故可以在其中进行控件的绑定操作等。

  completed函数内部为常见的JavaScript代码，不再解释。

  
  

  oncheckpoint绑定了"checkpoint"的处理函数，它在应用即将刮起时调用，可以在其中保存会话状态。但由于挂起到终止前只有10s左右时间，不建议在其中保存，而应当在数据改变的同时进行保存。

  
  

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

  
  

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

  
  Rating Object：

  onchange event：当rating控件改变时触发

  detail.tentativeRating：rating控件的新的userRating的值
  

  
  

  app.start();

  
  WinJS.Application.start()函数：触发应用事件（the activated, checkpoint, error, loaded, ready, settings, and unload events）

  
  

  第一部分学习到此结束，完整代码参见MicroSoft