製作桌面應用神器 node webkit

2015-11-06

經過多次測試後目前0.12.0的build版本是可以成功的,以下是透過cmd來自動化建置的方式:

用npm來安裝nwbuild

npm install -g nwbuild

到專案資料夾底下,然後cmd以下指令即可

nwbuild -p win64 -v 0.12.0 -o "../publish/" -f ./

註: 上方指令會建製win64版在專案同目錄下的publish資料夾中

 

自訂視窗frameless的狀況下,我們可以透過下方方式來建立window的相關控制

 style="-webkit-app-region: drag" //用在移動視窗

//縮小視窗
            $("#min_btn").on('click',function(){
                win.minimize();
                console.log('max');
                return false;
            })

//放大視窗
            $("#max_btn").on('click',function(){
                win.maximize();
                console.log('max');
                return false;
            })

//全螢幕切換
            $("#full_btn").on('click',function(){
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                    win.leaveFullscreen();
                    console.log('exit fullscreen');
                }else{
                    $(this).addClass("active");
                    win.enterFullscreen();
                    console.log('enter fullscreen');
                };
                return false;
            })

//關閉視窗
            $("#close_btn").on('click',function(){
                win.close();
                console.log('close window');
                return false;
            })

 

如果想用javascript+html來做桌面應用程式,可以考慮用node webkit這個方式,打包方式如下

1. 在html專案下建立如下的json檔案,命名為package.json

$vim package.json
$cat package.json
{
  "main": "index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "icon": "link.png",
    "toolbar": true,
    "frame": false,
    "width": 800,
    "height": 600,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
  "plugin": true
  }
}

2. 將此資料夾zip起來並更改副檔名為.nw

3. 把這個.nw檔案移至 nw.exe的資料夾中然後開啟cmd執行下面指令

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

4. 這個app.exe就是應用程式了,執行它就OK了

詳細資料請參考github: https://github.com/nwjs/nw.js/ 

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【632252】
digishot webdesign studio