Win10系列:JavaScript 项目模板中的文件和项模板文件
通过上面内容的学习,相信读者已经对各种项目模板和项模板有了大致的了解,本节将进一步介绍项目模板中默认包含的项目文件以及项模板文件,首先讲解这些文件中的初始内容以及作用,然后介绍在一个页面中如何添加控件,以及如何为控件注册事件处理函数并设计CSS样式。
1.项目模板中的默认文件
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!—对样式文件和后台JavaScript代码文件的引用 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
在上面的代码中,首先引用了WinJS库中的ui-dark.css、base.js和ui.js三个文件,ui-dark.css是JavaScript主题风格库,用于设计前台界面的主题风格;base.js文件提供了支持程序运行的基础类库,在基础类库中包含了处理程序激活、挂起、异常等行为的函数,ui.js是WinJS控件库,包含了一些Windows应用商店应用的前台界面常用的控件和控件样式。接着引用了default.css和default.js文件,default.css文件用于为默认启动页面和整体应用程序设计CSS样式,default.js文件用于实现默认启动页的逻辑功能和处理应用程序的生命周期事件。
正如上面所提到的,default.js文件用于实现默认启动页的逻辑功能,并处理应用程序的激活、挂起事件。默认情况下,default.js文件的内容中包含一个匿名函数,在这个匿名函数中定义了应用程序激活、挂起两个事件的事件处理函数,还调用了WinJS.Application.start函数。当WinJS.Application.start函数执行时应用程序开始运行。
下面首先介绍应用程序激活事件的处理函数,相应的JavaScript代码片段如下所示:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
args.setPromise(WinJS.UI.processAll());
在上面的代码中,onactivated是激活事件的名称。在激活事件处理函数中,首先根据参数args获得当前应用程序的激活类型,判断当前应用程序是否因用户启动而激活,如果是,则继续判断应用程序是刚刚运行还是在挂起后重新激活的,读者可以根据激活方式进行相关的逻辑处理,这里只给出了注释并没有给出具体的实现代码。接下来调用WinJS.UI.processAll函数初始化WinJS库控件,为了防止UI线程的堵塞,这里使用setPromise函数异步执行初始化控件的过程。
接下来介绍应用程序挂起事件的事件处理函数,代码片段如下所示:
app.oncheckpoint = function (args) {
在上面的代码中,oncheckpoint是挂起事件的名称。默认情况下挂起事件处理函数中没有具体的功能实现,开发者可以向其中添加代码定义应用程序挂起时的行为。
在default.js文件的最后,调用了WinJS.Application.start函数,调用这个函数后应用程序将开始运行。
@media screen and (-ms-view-state: fullscreen-landscape) {
在上面的代码中,@media后面是一种设备的名称,表示接下来将设计使用某种设备时的样式。 @media screen表示设计的是使用显示器时的样式,and后面小括号内的内容是一个条件判断,判断应用程序当前的视图状态是否为横屏,如果是,就采用大括号内的样式。上面语句中的大括号内还未添加具体样式代码,开发者可以根据需要在其中设计样式。
pagecontrol.html文件包含一个HTML页面的基本结构,在head元素内包含对WinJS库文件、pagecontrol.css和pagecontrol.js文件的引用,代码片段如下所示:
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!—对样式文件和后台JavaScript代码文件的引用-->
<link href="pagecontrol.css" rel="stylesheet" />
<script src="pagecontrol.js"></script>
在body元素中包含一个div元素,这个div元素的内容分为页面的标题部分和主要内容部分,header元素用于定义页面的标题,section元素则用于设计页面的主要内容。代码片段如下所示:
<div class="pagecontrol fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to pagecontrol</span>
<section aria-label="Main content" role="main">
WinJS.UI.Pages.define("/pagecontrol/pagecontrol.html", {
ready: function (element, options) {
updateLayout: function (element, viewState, lastViewState) {
相关文章
- javascript 基础_JavaScript高级编程
- 怎么使用 JavaScript 下载文件
- JavaScript SheetJS将 Html 表转换为 Excel 文件
- javascript_JavaScript走向成熟
- 【说站】javascript如何动态加载js文件
- JavaScript ArrayJavaScript博客 1 年前 桃李Taoli
- 前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
- 如何看待鸿蒙应用开发框架采用JavaScript作为开发语言?
- Magniber勒索软件通过JavaScript文件感染Windows用户
- JavaScript 常见面试题分析(三)
- 使用js加载器动态加载外部Javascript文件详解编程语言
- [javascript] 看知乎学习js闭包详解编程语言
- JavaScript 检查IP详解编程语言
- 关于JavaScript命名空间的一些心得详解编程语言
- 用JavaScript获取网页中的js、css、Flash等文件
- 从JavaScript的函数重名看其初始化方式
- 用JAVASCRIPT如何给<textarea></textarea>赋值
- Javascript&DHTML实例编程(教程)(三)初级实例篇1—上传文件控件实例
- 代码实现打印功能(asp.net+javascript)
- Javascript强制类型转换函数
- javascript触发事件列表比较不错
- JavaScript拾漏补遗
- javascript中的107个基础知识收集整理推荐
- javascript与CSS复习(二)
- JavaScript中各种编码解码函数的区别和注意事项
- Javascript异步加载详解(浏览器在javascript的加载方式)
- javascript保存文件到本地实现方法
- JavaScript中setInterval的用法总结
- javascript删除option选项的多种方法总结
- Javascript异步编程模型Promise模式详细介绍
- 全面兼容的javascript时间格式化函数(比较实用)
- JavaScript中实现sprintf、printf函数