尝试HTML + JavaScript 编写Windows App
2023-09-11 14:19:53 时间
一直以来博文中使用最多的就是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!按钮,达到预期效果。
相关文章
- [译]JavaScript:函数的作用域链
- C# 编写Windows Service(windows服务程序)
- [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!
- javascript利用jquery-1.7.1来判断是否是谷歌Chrome浏览器
- [windows菜鸟]C#中调用Windows API的技术要点说明
- [windows菜鸟]Windows API函数大全(完整)
- [windows菜鸟]C#中调用Windows API参考工具
- Google Earth Engine(GEE)——JavaScript基本功能介绍(影像和视频数据的导出)
- docker for windows--Windows 10 家庭中文版安装kali并配置更新源
- docker for windows--Windows 10 家庭中文版安装clickhouse 22.3版本及配置
- JavaScript中事件捕获(Event capturing)-------------->由外向内,事件冒泡(Event bubblin)---------->由内向外
- 【JavaScript】关于delete
- 【JavaScript】Javascript中的函数声明和函数表达式
- 《JavaScript数据可视化编程》——1.2 用折线图来绘制连续数据
- 《JavaScript面向对象精要》——1.8 原始封装类型
- 《JavaScript启示录》——1.12 复杂值(或组合值)
- windows Redis绑定ip无效,Redis设置密码无效,Windows Redis 配置不生效, Windows Redis requirepass不生效
- JavaScript--Navigator浏览器信息等BOM对象
- JavaScript知识点总结——JavaScript简介、变量与数据类型
- 安装SQL Server 2012过程中出现“启用windows功能NetFx3时出错”(错误原因、详细分析及解决方法)以及在Windows Server2012上安装.NET Framework 3
- 华为OD机试 - GPU调度(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- JavaScript目录
- 【javascript】Javascript中"||"的妙用
- Javascript操作DOM常用API总结
- JavaScript之apply()和call()的区别
- JavaScript快速查找节点
- JavaScript 获取粘贴时候的元素
- JavaScript 动态三角函数