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

使用方法以下：

1、下載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爲自建的項目名稱），就能夠查看頁面。

2、打包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的文件路徑：

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

 

 

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

 

3、相關知識

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