您的位置：首页 > 移动开发

尝试HTML + JavaScript 编写Windows App

2013-08-04 17:37 246 查看
　　一直以来博文中使用最多的就是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！按钮，达到预期效果。



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航