通過node-webkit實現web技術編寫桌面應用

jopen 10年前發布 | 68K 次閱讀 Node.js 開發 node-webkit

Node-webkit是一個基于Chromium與node.js的應用程序運行器，允許開發者使用web技術編寫桌面應用。使用web技術開發，支持node.js，可兼容多平臺（window/mac/linux） 。

項目地址：https://github.com/rogerwang/node-webkit

下載：http://dl.node-webkit.org/

 

基本操作（window系統）：

1、 下載系統對應的node-webkit版本，運行目錄中的nw.exe，顯示下圖說明可以正常運行。

d1.png

2、 建立package.json和index.html，壓縮成test.zip文件包，直接拖到test.zip包到nw.exe以nw.exe方式打開。

3、 把text.zip和nw.exe打包成test.exe，window下可能過命令

copy /b nw.exe+test.ziptest.exe

現在直接運行test.exe即可打開。

注意：nw.exe必須放在+號前面，合并命令需用cmd運行執行，win8下powershell執行報錯“copy-Item:找不到接受實際參數‘b.exe’的位置形式參數”。

4、 安裝Enigma Virtual Box（http://enigmaprotector.com/en/aboutvb.html），打包所有文件為一個可執行exe程序。

d2.png

 

package.json：

Package.json為項目的配置文件，可配置窗口邊框、工具欄、是否全屏、打開時窗口大小及位置、圖標、node.js啟動文件、默認打開頁面、窗口最大及最小尺寸等。默認頁面設置main。參數詳細說明見：

https://github.com/rogerwang/node-webkit/wiki/Manifest-format

 

node.js模塊擴展：

可在目錄中下載nodejs的各種模塊擴展功能，存放在目錄node_modules。

在頁面中調用模塊形式：

</div> </div>

    var imageMin= require('imagemin');  
    //to do something…

 

Node.js內建服務器：

參考：http://www.infoq.com/cn/news/2011/11/tyq-nodejs-static-file-server/

demo下載地址：http://download.csdn.net/detail/jyy_12/7924781

http.js:

    var PORT = 8000;

    var http = require('http');

    var url = require('url');

    var path = require('path');

    var fs = require('fs');

    var mime = require('./mime').types;



var server = http.createServer(function (request, response) {  
    var pathname = url.parse(request.url).pathname;  
    var realPath = "test" + pathname;  
    var ext = path.extname(realPath);  
    ext = ext ? ext.slice(1) : 'unknown';  
    var contentType = mime[ext] || "text/plain";  
    path.exists(realPath, function (exists) {  
        if (!exists) {  
            response.writeHead(404, {  
                'Content-Type': contentType  
            });  

            response.write("This request URL " + pathname + " was not found on this server.");  
            response.end();  
        } else {  
            fs.readFile(realPath, "binary", function (err, file) {  
                if (err) {  
                    response.writeHead(500, {  
                        'Content-Type': contentType  
                    });  

                    response.end(err);  
                } else {  
                    response.writeHead(200, {  
                        'Content-Type': contentType  
                    });  

                    response.write(file, "binary");  

                    response.end();  
                }  
            });  
        }  
    });  
});  

server.listen(PORT);  
console.log("Server runing at port: " + PORT + ".");  </pre><a href="/misc/goto?guid=4959615182155595151" target="_blank" title="派生到我的代碼片" style="text-indent:0;"></a></div>



</div>
</div>



package.json:



</div>
</div>


    {  
      "name": "nw-demo",  
      "main": "http://localhost:8000/test.html",  
      "nodejs":true,  
      "node-main":"http.js",  
      "window":{  
        "width":400,  
        "height":300,  
        "transparent":true  
      }  
    }  



Mime.js：



</div>


exports.types = {  
    "css": "text/css",  
    "gif": "image/gif",  
    "html": "text/html",  
    "ico": "image/x-icon",  
    "jpeg": "image/jpeg",  
    "jpg": "image/jpeg",  
    "js": "text/javascript",  
    "json": "application/json",  
    "pdf": "application/pdf",  
    "png": "image/png",  
    "svg": "image/svg+xml",  
    "swf": "application/x-shockwave-flash",  
    "tiff": "image/tiff",  
    "txt": "text/plain",  
    "wav": "audio/x-wav",  
    "wma": "audio/x-ms-wma",  
    "wmv": "video/x-ms-wmv",  
    "xml": "text/xml"  
};
</div>


node-webkit缺點：


最終打包后的文件較大，單純node-webkit所需的文件就占將近60M，壓縮后也將近25M。


 


參考資料：


官方API：https://github.com/rogerwang/node-webkit/wiki


推薦（比較詳細的中文教程）：http://www.cnblogs.com/xuanhun/tag/node-webkit/


http://pan.baidu.com/share/link?shareid=3743096074&uk=2754670725


http://damoqiongqiu.iteye.com/blog/2010720


http://www.baidufe.com/item/1fd388d6246c29c1368c.html


 


node-webkit實例：


https://github.com/zcbenz/nw-sample-apps


https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit

</div>


來自：http://blog.csdn.net/jyy_12/article/details/39316645

                    

                    

                        
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    


                

                

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔