NW.js使用及打包

簡介

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

（1）以網絡最流行的技術編寫原生應用程序的新方法

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

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

（4）可以使用DOM直接調用nodejs模塊

（5）容易打包和分發

（6）支持運行環境包括32位和64位的Window、Linux和Mac OS

使用方法如下：

一、下載nw

1.下載 NW.js（官網：http://nwjs.io/）

這里面normal這個算是運行時吧，sdk那個是一些工具箱，一般建議開發者選擇SDK開發套件去開發自己的應用，這樣的話就可以對開發過程中產生的錯誤進行調試debug

2.下載完成后解壓文件到你的開發目錄下，然后進入解壓文件的開發目錄，一般目錄結構如下（myapp為自建開發項目，不屬於固有部分）：

3.  myapp(名字可以隨便起)為項目目錄,其內部結構類似以下（除簡單配置文件外結構就跟開發一個網頁時類似，有js\html\css等）

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

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

 

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

二、打包exe

1.將項目相關添加到壓縮文件夾

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

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

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

雙擊app.exe打開即可

修改圖標

1.在myapp文件夾下（即web項目根目錄下）的assets文件夾用來存放所要更換的icon圖標

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

這樣就將打開軟件的圖標修改了

 

 

將打開的頁面圖標也修改一下

 

三、相關知識

1.使用Nodejs在Windows上調用CMD命令

要用nodejs執行cmd，需要引入一個包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', //計算器
　　function(data){
　　　　console.log("cacul")
　　});
  
cmd.run('touch example.created.file');
//　notepad--------打開記事本
//'mspaint' 畫圖板

　　

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

2.NWjs讀取文件

調用nodejs內置模塊

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('刪除文件成功');
　　})

})

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

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

代碼：

效果：

問題：input，button標簽之間出現了間距，這並不是我們所期望的。

 

解決方法：

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

2.去掉input，button標簽之間的空格

3.設置input為塊元素，並且給一個左浮動

效果：

原因:

input是內聯塊狀元素(inline-block);內聯元素是當做字體來處理的，字體之間是有間隔的，所以內聯元素之間也是有間隔的。

 

 

相關連接：https://www.cnblogs.com/yswenli/archive/2018/01/31/8393787.html  https://blog.csdn.net/yczz/article/details/52108760