尝试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！按钮，达到预期效果。

转载于:https://blog.51cto.com/186067/1280546

尝试HTML + JavaScript 编写Windows App相关推荐

javascript编写_用JavaScript深入探讨：为什么对编写好的代码至关重要。
javascript编写 Using simple terminology and a real world example, this post explains what this is and ...
我为什么要用 Javascript 编写 CSS？
曾经的前端开发中,JavaScript.CSS.HTML 作为三大独立的技术,各司其职,互不干涉.然而随着组件结构 React 的出现,将 HTML.CSS.JavaScript 强制混合在一起,这就 ...
鸿蒙 OS：使用 JavaScript 开发 Todo App UI 界面
距离鸿蒙 OS 2.0 发布已经过去一些日子了,看到鸿蒙系统强大的设备共享能力,我觉得未来它一定能够成为主流的操作系统.在利用了分布式系统的优势之后,多个设备间可以共享应用程序界面和数据,并且对于开发 ...
javascript编写_如何通过编写自己的Web开发框架来提高JavaScript技能
javascript编写 Have you ever asked yourself how a framework works? 您是否曾经问过自己框架是如何工作的? When I discovere ...
【教程】HTML5+JavaScript编写flappy bird
作者: 风小锐新浪微博ID:永远de风小锐 QQ:547953539 转载请注明出处 PS:新修复了两个bug,已下载代码的同学请查看一下大学立即要毕业了. ...
通过Intel XDK编写跨平台app(一)
Intel XDK 是一个新的跨平台手机应用开发工具.它努力把整个开发流程变的简单,尽可能把所有的平台都封装到一个包中,通过收集各种开发工具来使你的开发变的简单. 在这篇文章中,我将会向你介绍什么是I ...
javascript编写_如何在JavaScript中使用解构来编写更简洁，功能更强大的代码
javascript编写 by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 如何在JavaScript中使用解构来编写更简洁,功能更强大的代码 (How to ...
Windows App开发之开发准备
操作系统及SDK 操作系统显而易见,想要开发Windows App就得在Windows 8/8.1/10上进行,老旧的Windows XP/Vista/7已经不能满足时代的需要了.当然,在Windo ...
【万里征程——Windows App开发】开发准备
操作系统及SDK 操作系统如果打算开发Windows App,那么你的电脑就不能再用老旧的Windows 7了.推荐使用Windows 8.1.写这篇博客的时候,我用的操作系统是Windows 10 ...

尝试HTML + JavaScript 编写Windows App

尝试HTML + JavaScript 编写Windows App相关推荐

最新文章

热门文章