node-webkit制作桌面应用
来源:互联网 发布:unity3d导出obj 编辑:程序博客网 时间:2024/05/22 01:01
心血来潮突然想用js尝试写桌面应用,突然发现我大js真的无所不能。在网上搜到了这么一个东东:node-webkit。用Node.js来进行系统资源的访问,用HTML+CSS完成页面的搭建。哇,一切突然就好像变得特别简单。大学上c#课时也用c#制作过一些很入门的桌面应用,严格来说那个叫桌面窗体程序。比起来,node-webkit创建桌面应用的方式就像是我平时用来搭积木的东西突然可以盖楼了~厉害了,我的js。
废话少说,我把我的helloworld过程详细搞出来,过程中还有一些小坑,小思考。如下:
1.环境
首先,肯定要把node-webkit这个好帮手下载下来。
gihub地址:https://github.com/nwjs/nw.js/
nw官网:https://nwjs.io/
根据系统不同选择不同的版本,我这里下的是win64的版本,其他系统也基本大同小异。
v0.20.1: (Feb 2, 2017, based off of Node.js v7.5.0, Chromium 56.0.2924.87): release notes
NOTE You might want the SDK build. Please read the release notes.
☀Linux: 32bit / 64bit
☀Windows: 32bit / 64bit
☀Mac 10.9+: 64bit
☀Use LTS build for Win XP and early OSX.
latest live build: git tip version; build triggered from every git commit: https://dl.nwjs.io/live-build/
Previous versions
下载以后找到nw.exe。如果可以打开,那么就是环境搭好啦~接下来,就是开发软件啦~\(≧▽≦)/~
2.Hello World
我们为了方便就在刚刚下载下来的nw文件夹里创建一个文件夹,例如名字叫做product1。然后创建一个package.json。格式如下:
{ "name": "app1",//程序名字 "version": "0.1.0",//版本号 "main": "index.html",//程序入口 "window": { "toolbar": false, // 工具栏 "frame": false, // 框架 "width": 1000, "height": 650, "resizable": false//是否可调整大小 }}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="index.css"> 7 <script src="jquery-3.1.1.min.js"></script> 8 </head> 9 <body>10 <div id="top">11 <span id="logo">CosName</span>12 <div id="drag"></div>13 <ul id="nav">14 <li id="close"><a href="#" id="close_btn"></a></li>15 <li id="large"><a href="#" id="a" class="large_btn"></a></li>16 <li id="mini"><a href="#" id="mini_btn"></a></li>17 </ul>18 </ul>19 </div>20 21 <div id="play_area">22 <video src="" width="400" height="400" controls="controls "></video>23 </div>24 <div id="movie_list">25 <ul>26 <li><a href=""></a></li>27 </ul>28 </div>29 <div id="footer">30 </div>31 </body>32 </html>33 <script src="index.js" type="text/javascript"></script>
1 *{ 2 margin: 0; 3 padding: 0; 4 background-color: #3C3C3C; 5 color: lightgray; 6 outline: none; 7 user-select: none; 8 } 9 ul{10 list-style: none;11 }12 a{13 text-decoration: none;14 }15 #top{16 width: 100%;17 height: 30px;18 border-bottom: 1px solid #272727;19 }20 #logo{21 position: absolute;22 left: 10px;23 right: 0;24 width: 80px;25 height: 30px;26 line-height: 30px;27 font-weight: bold;28 }29 #drag{30 width: 91%;31 height: 30px;32 -webkit-app-region: drag;33 display: inline-block;34 }35 #nav{36 position: absolute;37 display: inline-block;38 right: 0;39 width: 90px;40 height: 30px;41 background-color: rebeccapurple;42 }43 #nav li{44 width: 30px;45 height: 30px;46 float: right;47 }48 #nav li a{49 display: inline-block;50 width: 30px;51 height: 30px;52 z-index: 10000;53 }54 #close a{55 background: url("close.png") 0 no-repeat;56 background-size: 20px;57 background-position: center;58 }59 #large a{60 background: url("large.png") 0 no-repeat;61 background-size: 20px;62 background-position: center;63 }64 #mini a{65 background: url("mini.png") 0 no-repeat;66 background-size: 20px;67 background-position: center;68 }69 #close a:hover,#a:hover,#mini a:hover{70 opacity: 0.7;71 }72 #play_area{73 margin: 30px 0 0 20px;74 width: 400px;75 height: 400px;76 border: 1px solid #272727;77 box-shadow: 0 1px 2px #8E8E8E;78 }79 #footer{80 position: fixed;81 bottom: 0;82 width: 100%;83 height: 32px;84 border-top: 1px solid #272727;85 box-shadow: 0 1px 2px #8E8E8E;86 }
1 var gui = require('nw.gui'); 2 var win = gui.Window.get(); 3 $('#close_btn').click(function () { 4 win.close(); 5 }) 6 $("#mini_btn").click(function () { 7 win.minimize(); 8 }) 9 $("#a").click(function () {10 if($(this).attr("id")=="a"){11 win.maximize();12 $(this).css("backgroundImage","url('restore.png')")13 $(this).attr({id:"b"});14 }else{15 win.restore();16 $(this).css("backgroundImage","url('large.png')")17 $(this).attr({id:"a"});18 }19 })
当然这一步自由发挥,程序最终呈现的效果就是你的页面在浏览器上的效果。
3.打包
nw应用的打包灰常简单,只需要把上边我们创建的所有和页面有关的文件包括那个json,统统压缩成zip格式的文件,然后更改后缀名为.nw,把这个文件直接拖到nw.exe上运行,出来的就是你的程序了。
这一步里我要说的是,如果在测试程序阶段,可以直接把没有压缩的文件夹拖到nw.exe上运行,不需要压缩也不要改后缀名,效果是一样一样的~
到了这里虽然我们程序效果有了,但是有一个很重要的问题,假如我做好了一个桌面程序,我想要给小伙伴发过去让他感受一下我的技艺精湛:)我总不能把他拖到我电脑前给他演示呀。这里有两步,首先把我们之前产出的这些文件和nw.exe进行一个合并,可以在nw根目录shift加右键快速打开命令窗口,然后键入以下代码:
copy /b nw.exe+myapp.nw myapp.exe(这里的myapp就是你压缩文件的名字,myapp.exe是你打包后产出exe程序的名字)
4.总结
Javascript搭建桌面应用的过程可谓简单轻松,但是这种方式也有一个显著的弊端。就是文件体积庞大。像我上述的那个程序全部打包好后有80多mb,可分明我都没写什么啊╮(╯_╰)╭。所以目前看来娱乐娱乐差不多,要做商业产品的话,估计还得优化。
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit制作桌面应用
- node-webkit开发桌面应用
- node-webkit开发桌面应用
- node-webkit开发桌面应用
- node-webkit开发桌面应用
- 用node-webkit做桌面应用
- node-webkit 使用简介开发桌面应用
- 用node-webkit把web应用打包成桌面应用
- 用node-webkit把web应用打包成桌面应用
- 用node-webkit把web应用打包成桌面应用
- 用node-webkit把web应用打包成桌面应用
- PAT 1118 Birds in Forest
- servlet表单数据
- Android 获取assets的绝对路径
- PyHusky快速开始
- 常见的20种“瓶颈”(性能问题)
- node-webkit制作桌面应用
- C#使用 Salt + Hash 来为密码加密
- python map()
- Python和numpy 中random 用法
- 狄储
- oj1977: C语言实验——求三个整数的最大值
- xcode 修改默认工作目录
- [Objective-C]关联(objc_setAssociatedObject、objc_getAssociatedObject、objc_removeAssociatedObjects)
- java中的多态、继承、this和super