尝试HTML + JavaScript 编写Windows App

简介:
  一直以来博文中使用最多的就是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!按钮,达到预期效果。







本文转自Gnie博客园博客,原文链接:http://www.cnblogs.com/gnielee/p/build-windows-app-using-html-javascript.html,如需转载请自行联系原作者

相关文章
|
2月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
2月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
4天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
12 4
|
3天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
15 0
html5+three.js公路开车小游戏源码
|
11天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
55 6
|
20天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
78 1
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
2月前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
26天前
|
API 开发工具 UED
在 UWP 中使用 Windows App SDK
【10月更文挑战第17天】在UWP中使用Windows App SDK可增强应用功能和性能。首先了解SDK特性,接着安装Visual Studio 2022及以上版本,并从微软官网下载安装SDK。配置项目时,确保目标版本支持SDK,添加SDK引用后即可使用新API提升应用体验。开发过程中应充分利用调试工具进行测试,确保应用的兼容性和稳定性。

热门文章

最新文章