尝试HTML + JavaScript 编写Windows App

尝试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,如需转载请自行联系原作者


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107911.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 渗透测试工具对比表下载_web渗透测试工具大全

    渗透测试工具对比表下载_web渗透测试工具大全编号 工具名称 工具介绍 适用范围 优点 缺点 1 Metasploit Metasploit是一种框架,拥有庞大的编程员爱好者群体,广大编程员添加了自定义模块,测试工具可以测试众多操作系统和应用程序中存在的安全漏洞。人们在GitHub和Bitbucket上发布这些自定义模块。与GitHub一样,Bitbucket也是面向编程项目的在线软件库。Saez…

  • leetcode-14最长公共前缀(分治|二分)[通俗易懂]

    leetcode-14最长公共前缀(分治|二分)[通俗易懂]原题链接编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀,返回空字符串 “”。示例 1:输入:strs = [“flower”,”flow”,”flight”]输出:”fl”示例 2:输入:strs = [“dog”,”racecar”,”car”]输出:””解释:输入不存在公共前缀。 提示:0 <= strs.length <= 2000 <= strs[i].length <= 200strs[i] 仅由小写英文字母组成题解分

  • docker中启动mysql_win10启动项命令

    docker中启动mysql_win10启动项命令前提:已经装好了mysql镜像官方推荐必须使用密码故命令为:dockerrun–namemysql01-eMYSQL_ROOT_PASSWORD=123456-dmysql:5.5但是没有做端口开放,外界访问不到!故先停止这个容器:在启动加了端口映射的mysqldockerrun-p3306:3306–namemysql02-eMYSQL_R…

  • modbus协议讲解及实现_MODBUS功能码

    modbus协议讲解及实现_MODBUS功能码Modbus是一种单主站的主/从通信模式。Modbus网络上只能有一个主站存在,主站在Modbus网络上没有地址,从站的地址范围为0-247,其中0为广播地址,从站的实际地址范围为1-247。Modbus通信标准协议可以通过各种传输方式传播,如RS232C、RS485、光纤、无线电等。Modbus具有两种串行传输模式,ASCII和RTU。它们定义了数据如何打包、解码的…

    2022年10月21日
  • 滴滴2020年财报_互联网人民日报

    滴滴2020年财报_互联网人民日报今日看点✦华为2020年财报:实现全球销售收入8914亿元,净利润646亿元✦京东:签订最终协议将京东云和人工智能业务剥离给京东数科✦滴滴拿下消费金融牌照,成为杭银消费金融有限公司第…

  • jquery的ajax跨域解决方案「建议收藏」

    jquery的ajax跨域解决方案「建议收藏」ajax是一种无刷新技术,在web开发中占有举足轻重的作用,但是由于安全问题,ajax在跨域时候并不支持post。现在笔者写个采用getJSON的方式实现跨域的实例来供大家参考。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号