Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现，接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能。
本篇我们使用WinJS 来创建一个简单的项目，来看看项目的构成是怎样的，与C#,XAML 的项目有哪些异同。
首先我们在Visual Studio 2013中选择模板 -> JavaScript -> Windows 应用商店来创建一个空白应用程序，来看看项目的构成（为方便对照，我在右边放了使用XAML的商店应用截图）
- WinJS项目里没有Properties目录去描述程序集的信息
- 引用目录包含了应用中需要的程序包，如图中的Windows Library中包含了我们需要的js 和 css
- css目录存放页面使用的css文件，如图中的default.css文件会在default.html中使用
- 同样的，js目录中存放的是js文件，default.js会在default.html中使用
- images目录类似于XAML项目中的Assets目录，存放磁贴和启动页图片等资源
- default.html 是程序的起始页，类似XAML项目的入口点
- package.appxmanifest 是清单文件，负责设置应用名称、起始页、磁贴、功能、声明等等。
package.appxmanifest文件绝大部分与XAML项目相同，可以参照 Windows 8.1 应用再出发 - 创建我的第一个应用 。
有一个地方需要注意，那就是应用程序选项卡中 入口点 变成了 起始页 ，熟悉BS开发的同学们肯定不会对起始页陌生。
下面来看看起始页 default.html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>WinJSAppDemo</title> <!-- WinJS 引用 -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script> <!-- WinJSAppDemo 引用 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>此处显示内容</p>
</body>
</html>
这是一个很简单的html构成，我们看到文件中添加了对WinJS 和 针对起始页的 default.js 和 default.css 的引用。
来看看default.js：
(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: 此应用程序刚刚启动。在此处初始化
//您的应用程序。
} else {
// TODO: 此应用程序已从挂起状态重新激活。
// 在此处恢复应用程序状态。
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: 即将挂起此应用程序。在此处保存
//需要在挂起中保留的任何状态。您可以使用
// WinJS.Application.sessionState 对象，该对象将在
//挂起中自动保存和恢复。如果您需要在
//挂起应用程序之前完成异步操作，请调用
// args.setPromise()。
};
app.start();
})();
我们看到，该文件中有两个很重要的方法，app.onactivated 和 app.oncheckpoint，分别进行应用激活和挂起时的处理。类似XAML中的 OnLaunched 和 OnSuspending。
大家注意 args.setPromise(WinJS.UI.processAll()); 的意思是在onactivated完成之前，完成 WinJS.UI.processAll() 的操作。而这个操作的意思是把声明的控件绑定到所有元素上，并且在指定的根元素启动。
如果我们想在default.html页加载时跳转到我们指定的页面，比如main.html，需要做哪些动作呢？
首先我们新建 main.html 相关文件，main.html、main.js 和 main.css，路径为pages/main，接下来完成跳转我们有两种方式：
（1）. 在default.html 里指定跳转页面
先对default.js做如下修改
var nav = WinJS.Navigation;
var ui = WinJS.UI;
上面定义了两个变量，在下面的onactivated方法中加入以下代码来替换 args.setPromise(WinJS.UI.processAll());
var p = ui.processAll().then(function () {
return nav.navigate(nav.location || Application.navigator.home, nav.state);
});
args.setPromise(p);
然后在default.html 页面的body中加入
<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/main/main.html'}" />
这样就可以在启动时，指定显示main.html 了。
（2）. 在default.js 里指定跳转
对default.js做如下修改
var nav = WinJS.Navigation;
定义nav变量，下面onactivated方法中加入如下代码替换 args.setPromise(WinJS.UI.processAll());
var p = WinJS.UI.processAll().
then (function () {
return nav.navigate("/pages/main/main.html")});
args.setPromise(p);
然后加入下面方法
nav.onnavigated = function (evt) {
var contentHost =
document.body.querySelector("#contenthost"),
url = evt.detail.location;
WinJS.Utilities.empty(contentHost);
WinJS.UI.Pages.render(url, contentHost);
}
最后在default.html 文件中加入
<div id="contenthost"/>
这样也完成了启动时的页面跳转到main.html 的要求。
好了，到这里我们就利用WinJS 和 Html 完成了简单项目的创建，接下来我们利用WinJS演示XAML中介绍过的其他功能，谢谢。
Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目的更多相关文章
- Python框架学习之用Flask创建一个简单项目
在前面一篇讲了如何创建一个虚拟环境,今天这一篇就来说说如何创建一个简单的Flask项目.关于Flask的具体介绍就不详细叙述了,我们只要知道它非常简洁.灵活和扩展性强就够了.它不像Django那样集成 ...
- Windows 8.1 应用再出发 (WinJS) - 几种新增控件（1）
Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand.BackButton.Hub.ItemContainer.NavBar.Repeater.WebVi ...
- Windows 8.1 应用再出发 (WinJS) - 几种新增控件（2）
上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...
- 沉淀，再出发：PHP的简单使用
沉淀,再出发:PHP的简单使用 一.前言 关于PHP,笔者在本科的时候就听到了太多太多,可惜虽然看了很多的教材,听到了无数遍,也没有系统性的整理过和学习过这方面的知识,这点无论什么时候想起来都是一种遗 ...
- 沉淀，再出发：Django的简单使用
沉淀,再出发:Django的简单使用 一.前言 在学习了python的基础语法之后,其实大家都很怀疑python的使用场景,其实python在很多场合都有很强的适应性,就比如说web开发之中使 ...
- 沉淀，再出发：VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- java最简单的知识之创建一个简单的windows窗口，利用Frame类
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...
- 使用Cocos studio创建一个简单的project
前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...
- Eclipse + Jersey 发布RESTful WebService（一）了解Maven和Jersey，创建一个WS项目（成功！）
一.下文中需要的资源地址汇总 Maven Apache Maven网站 http://maven.apache.org/ Maven下载地址: http://maven.apache.org/down ...
随机推荐
- JSP+Servlet中使用cos.jar进行图片上传（文件上传亦然）
链接:JSP+Servlet中使用jspsmartupload.jar进行图片上传下载 关于cos.jar,百度百科只有这么几句话(http://baike.baidu.com/subview/406 ...
- iOS开发中的4种数据持久化方式【一、属性列表与归档解档】
iOS中的永久存储,也就是在关机重新启动设备,或者关闭应用时,不会丢失数据.在实际开发应用时,往往需要持久存储数据的,这样用户才能在对应用进行操作后,再次启动能看到自己更改的结果与痕迹.ios开发中, ...
- WCF大文件传输
WCF传输文件的时候可以设置每次文件的传输大小,如果是小文件的时候,可以很方便的将文件传递到服务端,但是如果文件比较大的话,就不可取了 遇到大文件的话可以采取分段传输的方式进行文件传输 思路: 1.客 ...
- mac java目录
/Library/Java/JavaVirtualMachines/jdk1.7.0_10.jdk/Contents/Home mac java的安装目录为 /Library/Java/JavaVir ...
- Windows上x86程序正常但x64程序崩溃问题
先看下面代码: #include <stdio.h> #include <windows.h> #include <memory> class Test { pub ...
- teamviewer现在无法捕捉屏幕,这可能是由于快速的用户切换或远程桌面会话已经断开
解决方法: 不用远程连接过去开启teamview,直接在在电脑本机上手动开启teamview就可以了 即:如果是mstsc远程过去开启,则会有这个错误提示,需要让服务器连接显示器,手动去登录 ...
- PHP性能优化简述
先谢慕课网,这里只做理论简述/** * PHP性能优化 * * 1.问题分析 * PHP语法使用不正确 * PHP不擅长的事 * PHP连接的服务不给力 * PHP自身短板 * 其它原因 * 2.PH ...
- java 堆栈
堆栈(stack).位于通用RAM中,但通过它的“堆栈指针”可以从处理器哪里获得支持.堆栈指针若向下移动,则分配新的内存:若向上移动,则释放那些 内存.这是一种快速有效的分配存储方法,仅次于寄存器. ...
- jdk代理和cglib代理
1.jdk静态代理(静态代理和动态代理) 本质:在内存中构建出接口的实现类. 缺陷:只能对实现接口的类实现动态代理, 使用cglib可以对没有实现接口的类进行动态代理. 2.cglib动态代理 ...
- 定位一组对象-checkbox 、radiobutton
webdriver 可以很方便的使用find_element 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,WebElement 接口同样提供了定位一组元素的方法find_element ...