一直以来博文中使用最多的就是C# + XAML。进入Windows App时代，又多了一对 Javascript + HTML组合，这对于Web开发的程序员来说再熟悉不过了。其实小编也做过几年的Web开发，算不上什么大拿，但那时无时不刻的在网络上寻找Javascript、AJAX、JQuery代码，研究各种动态Web效果。每次打开VS总是看到Javascript项目选项，但从来也没创建过。随着Windows 8.1 Preview、Visual Studio 2013 Preview发布，我也来体验一下Javascript开发Windows App是什么感觉。

　　打开Visual Studio 2013 Preview，新建一个空Javascript项目，在工程目录中有三个default文件，后缀分别为css、js、html，看到这三个文件不用打开就应该知道是干什么的。Default.css控制界面显示效果，比如字体大小、间距、颜色等。Default.js程序逻辑处理，如事件、动态效果等。Default.html这个就是界面展示了，程序的UI效果都通过它来展示。

　　在Default.html的<Body>标签里添加一些简单的代码，我们的目的是当点击Go！按钮时，显示username填写的名字。个人喜好用Blend进行界面编辑，用起来比VS方便一些。

<body>

  <div class="apptitle">Hello World!</div>

  <div class="appname" id="showname"></div>

  <div class="appinput">

    <input id="username" type="text" />    <button id="nameBtn" type="button">Go!</button>

  </div>

</body>

　　接下来，需要在Default.js里定义按钮点击事件，事件写好后需要在app.onactivated中注册该事件，这样才能使点击按钮生效。

function showNameBtnClick(eventInfo) {

 var userName = document.getElementById("username").value;

 var showString = "This is " + userName + "!";

 document.getElementById("showname").innerText = showString;

}
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());

  var nameBtn = document.getElementById("nameBtn");

  nameBtn.addEventListener("click", showNameBtnClick, false);

 }

};

运行F5启动程序，在Input中输入名字，点击Go！按钮，达到预期效果。

尝试HTML + JavaScript 编写Windows App的更多相关文章

  1. 如何使用 App Studio 快速定制你自己的 Universal Windows App

    之前我为大家介绍过 App Studio 这只神器可以帮助大家快速制作一个 Windows Phone 8 的应用,今天之所以在写一篇关于 App Studio 的文章是因为,App Studio 经 ...

  2. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  3. 用Xamarin和Visual Studio编写iOS App

    一说开发 iOS app,你立马就会想到苹果的开发语言 Objective C/Swift 和 Xcode.但是,这并不是唯一的选择,我们完全可以使用别的语言和框架. 一种主流的替换方案是 Xamar ...

  4. 怎样使用 App Studio 高速定制你自己的 Universal Windows App

    今天之所以在写一篇关于 App Studio 的文章是由于,App Studio 经过了几次升级功能得到了明显提升还能够调用系统功能了.而且能够更方便的和应用商店关联公布 Universal Wind ...

  5. 【教程】HTML5+JavaScript编写flappy bird

         作者: 风小锐      新浪微博ID:永远de风小锐      QQ:547953539      转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下 大学立即要毕业了. ...

  6. 通过Intel XDK编写跨平台app(一)

    Intel XDK 是一个新的跨平台手机应用开发工具.它努力把整个开发流程变的简单,尽可能把所有的平台都封装到一个包中,通过收集各种开发工具来使你的开发变的简单. 在这篇文章中,我将会向你介绍什么是I ...

  7. 用React Native编写跨平台APP

    用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时.原生组件渲染的应用程序的框架.它基于React,Facebook的JavaScript的 ...

  8. c# 编写windows 服务，并制作安装包

    对服务的认识有很多个阶段. 第一阶段:当时还在用c++,知道在一个进程里while(True){},然后里面做很多很多事情,这就叫做服务了,界面可能当时还用Console控制台程序. 第二阶段:知道了 ...

  9. 用Kotlin语言重新编写Plaid APP：经验教训(I)

    原文标题:Converting Plaid to Kotlin: Lessons learned (Part 1) 原文链接:http://antonioleiva.com/plaid-kotlin- ...

随机推荐

  1. android Gui系统之WMS(1)----window flags & view flags

    SurfaceFlinger 前面说的,就是一个surface的合成.SurfaceFlinger就是一个默默的记录着,它不会对surface的内容有什么改动. WMS(WindowsManagerS ...

  2. RESTful API你怎么看？

    关于RESTful 我结合自身实际工作经验说一说我的体验: 1. 统一资源定位方式 2. 统一行为方式 3. 简单统一就有力量 占位待续 如果觉得一个新东西学习门槛高,原因一般是什么? 约定太多,概念 ...

  3. C#八皇后问题 枚举值

    记得刚出道的时候, 有考虑怎么面试, 以及可能会遇到的面试题, 有一个人说了一下 八皇后问题, 据说要用 sql 语句写出来, 暂时我 写了一个C#版本的, 经测验,八皇后算法结果为 92种, 这个与 ...

  4. vmware克隆虚拟机eth0网卡无法启动

    概述: 通过vmware克隆安装好的虚拟机之后,出现了网卡未启动的问题. vmware安装虚拟机请看:<vmware快速安装linux虚拟机>. 定位过程: 1.通过ifocnfig命令只 ...

  5. 十五天精通WCF——第四天 你一定要明白的通信单元Message

    转眼你已经学了三天的wcf了,是不是很好奇wcf在传输层上面到底传递的是个什么鸟毛东西呢???应该有人知道是soap,那soap这叼毛长得是什么 样呢?这一篇我们来揭开答案... 一:soap到底长成 ...

  6. mod_PHP&fastcgi

    从宏观上来看,PHP内核的实现与世界上绝大多数的程序一样,接收输入数据, 做相应处理然后输出(返回)结果. 我们编写的代码就是PHP接收的输入数据,PHP内核对我们编写的代码进行解释和运算, 最后返回 ...

  7. jquery简单入门（一）

    相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...

  8. Filestream 使用简单步骤

    为了减少大文件在数据库的存储对数据库的读写效率造成的压力,多了FileStream这一个功能,下面介绍一下如何快速使用FileStream. 1.开启SqlServer实例对FileStream 的开 ...

  9. SQL Server调优系列基础篇（联合运算符总结）

    前言 上两篇文章我们介绍了查看查询计划的方式,以及一些常用的连接运算符的优化技巧,本篇我们总结联合运算符的使用方式和优化技巧. 废话少说,直接进入本篇的主题. 技术准备 基于SQL Server200 ...

  10. MongoDB3.0.x版本用户授权配置(单机环境)

    MongoDB数据库默认情况下是没有做权限控制的,只要能够连接所开放的端口就能进行访问,而且拥有root级别的权限:对于生产环境而言是极不安全的,所以需要建立用户,进行授权控制. 单机环境下的用户授权 ...