原教程链接:创建第一个采用 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