前面几篇我们介绍了如何利用 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) - 创建一个简单项目的更多相关文章

  1. Python框架学习之用Flask创建一个简单项目

    在前面一篇讲了如何创建一个虚拟环境,今天这一篇就来说说如何创建一个简单的Flask项目.关于Flask的具体介绍就不详细叙述了,我们只要知道它非常简洁.灵活和扩展性强就够了.它不像Django那样集成 ...

  2. Windows 8.1 应用再出发 (WinJS) - 几种新增控件(1)

    Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand.BackButton.Hub.ItemContainer.NavBar.Repeater.WebVi ...

  3. Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

    上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repea ...

  4. 沉淀,再出发:PHP的简单使用

    沉淀,再出发:PHP的简单使用 一.前言 关于PHP,笔者在本科的时候就听到了太多太多,可惜虽然看了很多的教材,听到了无数遍,也没有系统性的整理过和学习过这方面的知识,这点无论什么时候想起来都是一种遗 ...

  5. 沉淀,再出发:Django的简单使用

    沉淀,再出发:Django的简单使用 一.前言     在学习了python的基础语法之后,其实大家都很怀疑python的使用场景,其实python在很多场合都有很强的适应性,就比如说web开发之中使 ...

  6. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  7. java最简单的知识之创建一个简单的windows窗口,利用Frame类

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...

  8. 使用Cocos studio创建一个简单的project

    前不久我接到了一个项目,项目要求使用Cocos2d-X的最新版本号,Cocos2d-X3.4.对于一直在陶醉在Cocos2d-X2.2.3的世界中的我开说,使用Cocos2d-X3.4忽然认为有点不适 ...

  9. Eclipse + Jersey 发布RESTful WebService(一)了解Maven和Jersey,创建一个WS项目(成功!)

    一.下文中需要的资源地址汇总 Maven Apache Maven网站 http://maven.apache.org/ Maven下载地址: http://maven.apache.org/down ...

随机推荐

  1. oracle创建包后执行报错:object omgmig.test_package is invalid.

    今天学习了一下oracle的包的写法,然后碰到这么个问题.包声明和包主体都正确,但是就是执行报错:object omgmig.test_package is invalid. 这是会报错的sql,看起 ...

  2. PCI Express(一)- Connector

    在FPGA4FUN上看到一篇介绍PCI-E的帖子,简单易懂,适合入门,特地搬过来 原文地址:http://www.fpga4fun.com/PCI-Express.html 前言: As PCI Ex ...

  3. struts2 xml中重定向

    <result name="success" type="redirect">ManagePartAction</result> 重定向 ...

  4. 解决多网卡SNMP获取不到数据的问题

    前言 前几天,公司的某个平台突然访问不了,我以为是网站挂了,于是想连接服务器查看,谁知道连服务器都连不上,然后我尝试PING,结果一直PING不通,此时我有点慌了,但我的头脑还是保持清醒的,我马上连接 ...

  5. jqGrid学习笔记(二)

    本节介绍jqGrid其他的使用方法,主要是一些基本操作,特殊的数据显示等. 1 刷新jqGrid数据. 常用到刷新jqGrid数据的情况是,在用到查询的时候,根据查询条件,请求数据,并刷新jqGrid ...

  6. 【POJ2949】Word Rings(最大平均值环)

    题意:给定N个字符串,如果A串的最后两个字母跟B串的前两个字母相同它们就能连接. 求一个由字符串组成的首尾相连的环,使(字符串总长度/字符串个数)最大. n<=100000 len<=10 ...

  7. 用jsch.jar实现SFTP上传下载删除

    java类: 需要引用的jar: jsch-0.1.53.jar 关于jsch有篇文章关于目录的问题写得非常好:http://www.zzzyk.com/show/9f02969327434a6c.h ...

  8. oracle全文检索

    全文检索 oracle对使用几十万以上的数据进行like模糊查询速度极差,包括 like 'AAA%' ,like '%AAA',like '%AAA%',like '%A%A%'的那些模糊查询.网上 ...

  9. DataGridView的DataGridViewComboBoxColumn列在编辑时自动弹出下拉列表

    在DataGridView的CellEnter的事件中添加如下代码即可: if (e.ColumnIndex == dataGridView1.Columns["仓库名"].Ind ...

  10. [aspx]控件及代码小例

    1. 原生 asp 方式遍历 DataTable  2. aspx 的控件 Repeater 后台绑定 <%-- DataTable dt = OleDbHelper.GetTable(&quo ...