WinJS 3 - Windows,电话和网络

分享于 

18分钟阅读

Web开发

  繁體

介绍

在构建 2014时,微软宣布WinJS开放源码,第一个目标是对网站使用,而不仅仅是 Windows 和电话应用。 on年 17,WinJS 3.0首次正式发布,并随 跨浏览器 兼容性而带来。 将它设置为在你的站点上工作与其他的JavaScript库没有什么不同。 但是扩展一个通用的。Windows 或者手机应用程序,也包括一个包含WinJS的web界面。

在本文中,我将演示如何使用 WinJS 3创建一个网络应用程序,然后在通用应用程序中重用该代码。 然后我将展示如何扩展站点的功能来包括本地WinRT功能,而不用使用Cordova创建混合应用程序。

背景

我将在本文中讨论许多不同的技术。 如果你遇到以前未见过的某些内容,以下是一些很好的参考点:

设置网络项目

我使用 Visual Studio 专业 2013更新 3并安装了 Web Essentials扩展。

首先在 Visual Studio 中创建一个名为HelloWeb的空白解决方案。 这是在其他项目类型> Visual Studio 解决方案> 空白解决方案下找到的。

对于我们的web应用程序,我们将创建一个,项目,但你还可以创建任何它的他类型的ASP.NET 项目。 右键单击解决方案 NAME,选择添加> 新项目> app> HTML应用程序和app和 NAME lt HelloWeb.Web.

继续,并且 delete 现有的app.css, app.ts 和 index.html。 我们将重新创造这些。 我们要做的第一件事是添加WinJS的NuGet包及其输出定义。 右击网络项目并选择管理NuGet软件包。 在Search搜索Online中输入 WinJS,你应该看到包含用于 JavaScript ( WinJS ) 和 winjs.TypeScript.DefinitelyTyped的Windows 库的结果。 将两者都安装到网络项目中。

你的项目现在应该包含两个新文件夹,脚本和 WinJS。

创建默认页面

现在我们可以开始添加代码了。 首先,让我们创建默认的JavaScript文件,类似于在通用应用程序中所发现的。 我们将创建一个TypeScript文件,这个文件将为我们创建一个JavaScript文件。 如果你是新闻稿的新员工,请参阅"参考"部分以获取更多信息。 通过右击项目 NAME 并选择添加> 新文件夹,添加名为js的新文件夹。 右键单击该文件夹并选择 Add> TypeScript文件,向该文件夹添加一个名为 default.ts的文件。 将以下代码添加到默认的TypeScript file:"

///<reference path="../Scripts/typings/winjs/winjs.d.ts"/>module HellowWeb {
 "use strict";
 var app = WinJS.Application;
 if (location.protocol == "http:" || location.protocol == "https:") {
 app.onready = () => {
 // Apply declarative control binding to all elements. WinJS.UI.processAll();
 };
 // Start dispatching application events. app.start();
 }
} 

保存文件时,应该生成一个隐藏的default.js,你可以在左窗格中看到它。

让我们逐行浏览这个文件行。

  • 参考路径由TypeScript用于智能感知,并指向我们在前面使用NuGet包下载的winjs输入。

  • 我们将一切都封装在一个字典 MODULE 中,类似于一个. NET 命名空间,以保持全局范围。

  • 使用严格帮助你捕捉常见的代码问题,并且是一个很好的安全特性。

  • app变量只是为 WinJS.Application 创建一个快捷方式,所以我们每次都不需要输入整个事件。 我使用这个方法是因为你经常会在默认的通用应用程序模板中看到这个。

  • 位置协议用于检测我们浏览器中运行。 关于这一点的更多信息。

  • app.onready() 信号表明页面已经准备好用于 WinJS,类似于jquery事件的准备。

  • WinJS.UI.processAll() 查找页面上的所有WinJS控件并将它们设置为。

  • app.start() 会触发WinJS生命周期并运行。

我并没有深入钻研WinJS是如何工作的。 我建议访问参照部分中列出的in WinJS站点。

对网络。电话或者 Windows 模式进行收费的收费

当引入通用应用时,我们得到了一个叫做共享项目的新项目类型。 这不是标准的项目类型,不像移植类库那样编译到任何类型的自包含库中,它更像是链接文件的改进。 这些项目中的代码将编译为 Windows 应用程序和电话应用程序。 如果你只有一个或者另一个要运行的代码,则可以使用如下编译器指令:

#if WINDOWS_APP<br/>#endif
#if WINDOWS_PHONE_APP<br/>#endif

通用应用程序还不支持添加一个网络项目,因此它们也不支持任何基于web的编译器指令。 相反,我们可以使用应用程序的URL来确定是否在网站下运行,这正是我们在前面的代码中做的。 Windows 和电话应用将在 ms-appx协议下运行。

现在我们可以添加默认的HTML页面。 右键单击项目,然后选择添加> HTML页面和 NAME 默认值。 我们这样做是为了与通用项目保持一致。 你可能还希望将这里设置设置为在项目属性> Web> 启动操作> 页下进行调试。

添加以下标记:

<html><head><meta charset="utf-8"/><title>Hello Web</title> 
 <!-- WinJS references --><link href="/WinJS/css/ui-dark.css" rel="stylesheet"/> 
 <script src="/WinJS/js/base.min.js"></script> 
 <script src="/WinJS/js/ui.min.js"></script> 
 <!-- Hello Web references --><script src="/js/default.js"></script></head><body><h1>Hello Web!</h1></body></html>

这里没有什么特别的,我们只是在设置对WinJS和我们自己的文件的引用。

如果现在构建项目,你将得到与我们之前为WinJS添加的typings相关的一堆错误。 这是因为输入包含的所有旧版版本。 进入 Scripts/typings/winjs 文件夹并 delete 除 winjs.d. ts之外的所有文件。

你的项目文件夹现在应该如下所示:

构建你的应用程序并运行它。 你应该得到一个简单的网页,它看起来像一个 Windows 现代应用。

恭喜你,你现在有一个基于WinJS的web应用程序,运行,你可以继续。 接下来,让我们在 Windows 和手机应用程序中重用这个代码结构。

设置通用应用程序项目

右键单击解决方案 NAME 并选择添加> 新项目。 选择( 通用应用)> 存储应用中的空白应用程序模板> 通用应用程序和 NAME HelloWeb。

在这里进行任何更改之前,我们先来讨论一下代码使用策略。

使用的代码

就像前面讨论的,通用应用不支持web项目( 但是)。 我们仍然有两种策略可以用来共享我们的代码: 链接文件和后期生成事件。

链接文件易于设置,但有一个大问题,共享项目不支持它们。 你将需要将链接文件添加到 Windows 和电话项目中的同一位置。

可以使用Post生成事件( 如 xcopy ) 将文件复制到共享项目文件夹,然后将它们添加到项目中。 这里的缺点是,它们是副本,如果你对它们进行修改,那些更改将在下一个构建中丢失。

当然,根据源代码控制和第三方工具,当然还有更多的选项可用,但是这两个选项是最容易。 对于本文,我们将使用链接文件到 Windows 和电话项目,并保存用于WinRT特定功能的共享项目。

先清理那些我们不打算使用的文件。 Delete 文件夹和 Windows 和WindowsPhone项目中的default.html 文件。 接下来,右击 Windows 项目并选择添加> 现有项目,导航到web项目目录并选择 default.html 文件。 选择添加之前,单击 Add Add上的向下箭头,然后选择Add作为链接"。 使用 Windows Phone 项目重复这里过程。

让我们用app文件的JavaScript来做同样的事情。 注意,这个文件不会出现在文件项目的Web列表中,因为它被隐藏并自动创建。 在 Windows 项目中创建一个js文件夹,从网络项目中添加链接 default.js 文件,然后重复电话项目。 提醒一下,因为它不支持链接文件,所以我们不会把这些放在共享项目中。

准备 Windows 和电话项目的最后一步是将WinJS和TypeScript输入到每个项目中,同样的方式。 或者,你也可以将这些设置为链接文件,这只是首选项问题。 别忘了从winjs文件夹中删除旧的typings。

你的Windows 和电话项目现在应该如下所示:

如果你现在尝试构建这个项目,它将不会工作。 共享项目中存在重复的default.js 文件。 下次我们会注意到的。

Windows 特定功能

毕竟,我们可以添加支持使用WinRT特定功能扩展web项目的支持。 我们要采取的路径是从默认页面引用基于web的JavaScript文件和基于 Windows的JavaScript文件。 web项目将包含一个基于 Windows的空的JavaScript文件,共享项目将包含一个真正的JavaScript文件。 我们将通过设置 default.js 文件为必须响应基于 Windows的事件的Windows 和电话项目设置文件。

首先,将项目文件夹的共享js重命名为 jsrt。 现在它不会与 Windows 和电话项目中的default.js 文件冲突。

接下来,向web项目添加一个jsrt文件夹,并向该文件夹添加一个名为 default.js的JavaScript文件。 将文件保留为空。这里文件存在的唯一原因是我们在所有项目中使用相同的default.html。

现在在 default.html 页面中添加对该文件的引用,方法是在现有的default.js 页引用之后。

<!-- Hello Web references --><script src="/js/default.js"></script><script src="/jsrt/default.js"></script>

如果你还记得,我们在设置/js/default.js file: 时添加了这一行代码

if (location.protocol =="http:" || location.protocol =="https:") {

只有一种方法可以包含只在你的网络项目中运行的代码。 在我们的例子中,我们在这个代码的block 中启动了 WinJS。 当它在 Windows 下运行时,它将忽略它。 因这里我们需要以不同的方式为 Windows 激活 WinJS,我们在/jsrt/default.js 文件中做了。 由于 Windows 特定代码只能包含在jsrt文件中,所以不需要使用协议检查语句。

我们不需要在共享项目的jsrt文件夹中触摸 default.js 文件,它是好的。 我们还没有安装这里文件的TypeScript。 在本文的时候,TypeScript不能与共享项目一起使用。 你需要使用 JavaScript,或者将所有的打印文件文件放在 Windows 项目中,并将它的链接到手机项目。 希望这个限制很快就会解决。

// For an introduction to the Blank template, see the following documentation:// http://go.microsoft.com/fwlink/?LinkID=392286(function () {
 "use strict";
 var app = WinJS.Application;
 var 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());
 }
 };
 app.oncheckpoint = function (args) {
 // TODO: This application is about to be suspended. Save any state// that needs to persist across suspensions here. You might use the// WinJS.Application.sessionState object, which is automatically// saved and restored across suspension. If you need to complete an// asynchronous operation before your application is suspended, call// args.setPromise(). };
 app.start();
})();

构建解决方案并运行网络项目以确保一切仍然正常工作。 现在将 Windows 项目设置为启动项目,并执行相同的操作。 你应该看到一个相同的应用程序作为 Windows 应用程序运行。 现在为 Windows 手机做同样的事情。

我们现在有了一个代码库,它可以跨 Windows。电话和网络运行大量代码重用 !

注意:如果你尝试重新构建整个解决方案并获取关于有效负载文件的错误,只需先构建web项目。

某些 final 清理

一切都正常工作,但是让我们做几件事,让开发经验更好。

首先,从 Windows 和电话项目的引用文件夹中删除对 Windows 库的旧引用。 我们将不再使用它们。

然后,通过右击脚本文件夹并选择添加> _references.js on文件,将 _references.js 文件添加到项目文件夹的Web脚本。 这将为你的JavaScript库提供智能。 它是为自动同步设置的,因此你的库的任何更改都将在这里自动引用。 我们只需要设置我们已经拥有的。 编辑这里文件以如下所示:

///<autosync enabled="true"/>///<reference path="../WinJS/js/js/base.js"/>///<reference path="../WinJS/js/ui.js"/>///<reference path="../WinJS/js/winjs.js"/>///<reference path="../WinJS/js/en-us/ui.strings.js"/>

对 Windows 和电话项目重复同样的事情。

默认情况下,这些项目类型将不查找这里文件。 你可以在工具> 选项> 文本编辑器> JavaScript>> 参考中添加它们。 将引用组更改为隐式( Windows 8.1 ) 并添加对 ~/Scripts/_references.js.的引用,对隐式( Windows Phone 8.1 ) 重复相同的更改,如下所示。

向前移动

在继续构建应用程序时,请记住以下几点:

在网络项目中创建应用程序的基础。 当你添加更多的html。JavaScript。CSS时,等等 还要将它们作为链接文件添加到 Windows 和电话项目中。

应该将to特定的任何内容添加到共享项目中,并将空匹配文件添加到Web项目中。

记住这是本机代码,它不是混合包装。 你将在 Windows 中获得本机JavaScript应用程序的全部功能和性能。 如果你想进一步扩展你的应用程序到iOS和安卓,你需要使用像Cordova这样的东西。

限制检查

我们希望 Visual Studio 下一大更新将会成为通用项目的集成部分,但目前,我们在本文中已经有一些局限性。

WinJS 3库不包含在通用应用程序中。 你需要通过一个NuGet包来添加它们。 这也意味着它们将作为你的应用程序的一部分下载,占用更多的磁盘空间。

共享项目不支持链接的文件。

TypeScript不支持共享项目。

重新生成解决方案可能会导致链接文件出现某些问题。 如果发生这种情况,首先构建网络项目。

还要记住,网上许多WinJS示例都将使用of网格来设置控件的布局。 这在 Windows 只应用中很好,但它不是 跨浏览器 兼容的。

下载

下载 HelloWeb.zip

历史记录

09/27/2014 - 发布的第一个版本。


相关文章