尝试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是什么感觉。
一直以来博文中使用最多的就是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）
出处：{GnieTech} （http://www.cnblogs.com/gnielee/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
出处：{GnieTech} （http://www.cnblogs.com/gnielee/）
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
分类:
Windows 8
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
2010-08-04 Microsoft Ribbon for WPF 正式发布
2009-08-04 File Thingie文件管理小之灵