簡介

NW.js （原名 node-webkit）是一個(gè)結(jié)合了 Chromium 和 node.js 的應(yīng)用運(yùn)行時(shí)，通過它可以用 HTML 和 JavaScript 編寫原生應(yīng)用程序。它還允許開發(fā)者從 DOM 調(diào)用 Node.js 的模塊 ，實(shí)現(xiàn)了一個(gè)用所有 Web 技術(shù)來寫原生應(yīng)用程序的新的開發(fā)模式，而且,開發(fā)者可以很容易的將一個(gè)web應(yīng)用打包成原生應(yīng)用（Further, you can easily package a web application to a native application.）。

（1）以網(wǎng)絡(luò)最流行的技術(shù)編寫原生應(yīng)用程序的新方法

（2）基于HTML5, CSS3, JS and WebGL而編寫

（3）完全支持nodejs所有api及第三方模塊

（4）可以使用DOM直接調(diào)用nodejs模塊

（5）容易打包和分發(fā)

（6）支持運(yùn)行環(huán)境包括32位和64位的Window、Linux和Mac OS

使用方法如下：

一、下載nw

1.下載 NW.js（官網(wǎng)：http://nwjs.io/）

這里面normal這個(gè)算是運(yùn)行時(shí)吧，sdk那個(gè)是一些工具箱，一般建議開發(fā)者選擇SDK開發(fā)套件去開發(fā)自己的應(yīng)用，這樣的話就可以對開發(fā)過程中產(chǎn)生的錯(cuò)誤進(jìn)行調(diào)試debug

2.下載完成后解壓文件到你的開發(fā)目錄下，然后進(jìn)入解壓文件的開發(fā)目錄，一般目錄結(jié)構(gòu)如下（myapp為自建開發(fā)項(xiàng)目，不屬于固有部分）：

3. myapp(名字可以隨便起)為項(xiàng)目目錄,其內(nèi)部結(jié)構(gòu)類似以下（除簡單配置文件外結(jié)構(gòu)就跟開發(fā)一個(gè)網(wǎng)頁時(shí)類似，有jshtmlcss等）

4. Package.json可以理解為應(yīng)用的配置文件，為必須；index.html作為應(yīng)用的入口文件，內(nèi)容和一般網(wǎng)頁類似，名字可以按自己喜好起，但是一定要和配置中的“main”參數(shù)設(shè)置一致；如果要引用node模塊，可以在目錄結(jié)構(gòu)中增加一個(gè)node_modules的目錄，以存放APP所需的node模塊。

title : 字符串，設(shè)置默認(rèn) title。
width/height : 主窗口的大小。
toolbar : bool 值。是否顯示導(dǎo)航欄。
icon : 窗口的 icon。
position :字符串。窗口打開時(shí)的位置，可以設(shè)置為“null”、“center”或者“mouse”。
min_width/min_height : 窗口的最小值。
max_width/max_height : 窗口顯示的最大值。
resizable : bool 值。是否允許調(diào)整窗口大小。
always-on-top : bool 值。窗口置頂。
fullscreen : bool 值。是否全屏顯示。
show_in_taskbar : 是否在任務(wù)欄顯示圖標(biāo)。
frame : bool 值。如果設(shè)置為 false，程序?qū)o邊框顯示。
"chromium-args" :"-allow-file-access-from-files" 相當(dāng)于給谷歌瀏覽器添加啟動(dòng)參數(shù)一樣，這行代碼允許angularjs直接訪問本地json文件。

5. 運(yùn)行應(yīng)用：將應(yīng)用程序目錄拖放到nw.exe即可運(yùn)行；或者在該下載包的根目錄下，按著 shift+右鍵 選擇 “在此處打開命令窗口” 打開cmd命令，輸入nw myapp （myapp為自建的項(xiàng)目名稱），就可以查看頁面。

二、打包exe

1.將項(xiàng)目相關(guān)添加到壓縮文件夾

將壓縮包更名為 app.nw，將app.nw放在nw.exe同級目錄下，跟nw一起打包成一個(gè)可執(zhí)行文件，執(zhí)行以下命令，然后就出現(xiàn)了這個(gè)app.exe可執(zhí)行文件：

copy /b nw.exe+app.nw app.exe

2.可以新建一個(gè)文件夾，把必須的文件放里面，如下為app.exe執(zhí)行必須的文件：

雙擊app.exe打開即可

修改圖標(biāo)

1.在myapp文件夾下（即web項(xiàng)目根目錄下）的assets文件夾用來存放所要更換的icon圖標(biāo)

2.配置nw.exe所在目錄的package.json文件，在icon配置項(xiàng)寫上icon的文件路徑：

這樣就將打開軟件的圖標(biāo)修改了

將打開的頁面圖標(biāo)也修改一下

三、相關(guān)知識(shí)

1.使用Nodejs在Windows上調(diào)用CMD命令

要用nodejs執(zhí)行cmd，需要引入一個(gè)包node-cmd

npm install node-cmd

var cmd=require('node-cmd');
  
cmd.get('notepad',//畫圖板
　　function(data){
　　　　console.log("data")
　　});
  
cmd.get('C:\Windows\System32\Calc.exe', //計(jì)算器
　　function(data){
　　　　console.log("cacul")
　　});
  
cmd.run('touch example.created.file');
//　notepad--------打開記事本
//'mspaint' 畫圖板

　　

cmd.get('dir ',function(err,data,stderr){//執(zhí)行cmd dir命令
    console.log(data);
    document.write(data); 
})
cmd.run();

2.NWjs讀取文件

調(diào)用nodejs內(nèi)置模塊

var fs = require('fs');

 //讀文件
fs.readFile('package.json', function (err, data) {
　　if (err) {
　　　　document.write( err.message);
　　　　return;
　　} else {
　　　　console.log(data);
　　}
});

//寫文件
fs.writeFile('c:/ecsp/ecsp.ini',params,'utf8',function(error){
　　if(error){
　　　　console.log(error);
　　　　return false;
　　}
　　console.log('寫入成功',params);
　　//fs.unlink刪除文件
　　fs.unlink('c:/ecsp/usb.xml',function(error){
　　　　if(error){
　　　　　　console.log(error);
　　　　　　return false;
　　　　}
　　　　console.log('刪除文件成功');
　　})

})

//執(zhí)行escpou.exe文件
cmd.get('C:\ecsp\escpout.exe',function(data){
　　console.log('執(zhí)行.exe命令'+data);
})

3.css樣式（消除input，button之間的間距）

代碼：

效果：

問題：input，button標(biāo)簽之間出現(xiàn)了間距，這并不是我們所期望的。

解決方法：

1.在父級元素上設(shè)置屬性：font-size:0px;
將input父級字體(font-size)設(shè)為0px，可以消除間隔，但是得重新設(shè)置內(nèi)聯(lián)元素(input)的字體大小;

2.去掉input，button標(biāo)簽之間的空格

3.設(shè)置input為塊元素，并且給一個(gè)左浮動(dòng)

效果：

原因:

input是內(nèi)聯(lián)塊狀元素(inline-block);內(nèi)聯(lián)元素是當(dāng)做字體來處理的，字體之間是有間隔的，所以內(nèi)聯(lián)元素之間也是有間隔的。

相關(guān)連接：https://www.cnblogs.com/yswenli/archive/2018/01/31/8393787.htmlhttps://blog.csdn.net/yczz/article/details/52108760

總結(jié)

以上是生活随笔為你收集整理的NW.js使用及打包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。