All of a sudden, I want to try to write desktop applications with js. Suddenly, I find that my big JS is really omnipotent. We found such a thing on the internet: node-webkit. Node.js is used to access system resources, and HTML+CSS is used to complete the construction of pages. Wow, everything suddenly seems so simple. In College c # classes, some very introductory desktop applications have been made with c #, which is strictly called Desktop form program. By contrast, the way node-webkit creates desktop applications is like something I usually use to build building blocks that can suddenly be built, my js.
Tell me less nonsense, I've worked out my helloworld process in detail, and there are some pits in the process, little thinking. As follows:
1. environment
First of all, you must download node-webkit as a good helper.
gihub address: https://github.com/nwjs/nw.js/
nw official website: https://nwjs.io/
Choose different versions according to different systems. I'm going to download the win64 version, and the other systems are basically the same.
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
Find nw.exe after downloading. If it can be opened, then the environment is set up. Next, the software is developed./~
2.Hello World
For convenience, we created a folder in the nw folder we just downloaded, such as product 1. Then create a package.json. The format is as follows:
Here I just use a part of the parameters, more can go to the official website to query documents, not to mention here.{ "name": "app1",//Program name "version": "0.1.0",//version number "main": "index.html",//Program entry "window": { "toolbar": false, // toolbar "frame": false, // frame "width": 1000, "height": 650, "resizable": false//Can you adjust the size? } }
(Just look at it):
Html
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>
css1 *{ 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 }
Javascript1 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 })