专栏首页Windows CommunityWindows 8.1 应用再出发 (WinJS) - 创建一个简单项目

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中介绍过的其他功能,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Extensions in UWP Community Toolkit - ListViewExtensions

    概述 UWP Community Toolkit Extensions 中有一个为 ListView 提供的扩展 - ListViewExtensions,本篇...

    Shao Meng
  • Windows Community Toolkit 3.0 - InfiniteCanvas

    InfiniteCanvas 是一个 Canvas 控件,它支持无限画布的滚动,支持 Ink,文本,格式文本,画布缩放操作,撤销重做操作,导入和导出数据。

    Shao Meng
  • UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制

    本篇作为技术分享系列的第二篇,详细讲一下文字的解析和绘制,这部分功能的研究和最终实现由团队共同完成,目前还在寻找更理想的实现方式。 首先看一下文字绘制在手绘视频...

    Shao Meng
  • [C# ASP.NET]如何让IIS Express支持外部(局域网)连接

    二、新建一个MVC网站,打开Visual Studio(笔者这里使用的是Visual Studio 2017),使用MVC模板按照默认项目名称新建一个WebAp...

    CNXY
  • Integer 中你所不知道的

    前几天和我六哥讨论技术的时候说到了 Integer,大家可能觉得 Intger 有什么好说的,不就是 int 吗,Java 装箱拆箱机制。那么现在有这样一个问题...

    haifeiWu
  • 组合优化问题Talent Scheduling Problem(TSP)简介

    今天为大家介绍的问题是Talent Scheduling Problem,因为没有合适的中文翻译,所以下面直接简称其为TSP (注意, 这里的TSP可不是旅行商...

    用户1621951
  • 93-re练习:匹配文件中指定模式

    凯茜的老爸
  • 教育局互动录播系统解决方案

    为进一步加快学校教育信息化建设步伐,某市教育局根据实际情况对全区中小学课堂进行录播教学的建设,实现全市400多所学校录播教室的互动课堂。

    中云微迅
  • 简单而强大的swig.js

    本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载 swig的简单介绍 swig是JS模板引擎,它有如下特点: 根据路劲渲染...

    IMWeb前端团队
  • [ISUX原创]给孩子设计时光隧道

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 生动有趣的学习内容,用一条穿越时空的路径慢慢展现出来,让孩子在游玩的过程中学到英语...

    腾讯ISUX

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动