nw.js构建桌面应用

发表于:2017-11-09

nw.js是用于构建桌面应用程序,可以把JS/DOM 打包成一个桌面应用程序,支持Linux、Mac、Windows。nw是基于Node.js。

本教程以React进行构建,Vue/Angular同样适用。


安装nw和nw-builder

nw是开发环境用的,nw-builder是打包用的。

// 本地安装
npm install nw nw-builder -D

// 或全局安装
npm install nw nw-builder -g

安装React脚手架

如果你已经安装跳过此步

npm install create-react-app -g

创建React

这步等待时间非常长...

create-react-app react-app

打包React

// 先进入react-app 目录
cd react-app

// 然后打包, 这个时候当前目录多出一个build文件夹,这个就是打包出来的目录文件
npm run build

编辑package.json

在react-app当前目录有一个叫package.json, 注意请不要跟着我打上注释,只是为了方便理解

// 找到scripts字段,
"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",

    // 增加这2个, 上面创建的时候就有
    // build/  意思就是指向当前build目录,开发用
    "nw-dev": "nw build/",

    // --platforms 后面是需要打包出来的平台,按自己的需求选择一些需要的。
    // dist/ 是打包出来的目录名,里面会有打包出来的应用程序, build/是打包目标
    "nw-build": "nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ build/"
  },

在build目录新建package.json

React打包好后build目录新建一个package.json,写入以下字段, 注意把下面注释全干掉不然会出问题。

{
    // 应用程序名字
    "name": "博客客户端",
    // 版本号,每次打包要更改
    "version": "1.0.0",
    // 入口文件指向当前index.html
    "main": "index.html",
    // 这个就是配置信息了
    "window": {
        // 窗口的最小宽度
        "min_width":1270,
        // 窗口的最小高度
        "min_height":700,
        // 标题栏图标,jpg/png,只有windows管用
        "icon": "assets/favicon.png",
        // 启动的时候的位置, 中心
        "position": "center"
    }
}

nw开发测试

在终端回到react-app目录执行以下命令, 这个时候回弹出nw窗口,如果窗口跟网页显示一样说明测试通过。

npm run nw-dev

nw打包

当前目录多出了dist目录,里面就是打包出来的应用程序,至此整个过程结束。

npm run nw-build

关于package.json其他的配置信息

{
    "name": "桌面应用",
    "version": "1.0.0",
    "main": "index.html",
    "window": {
        // 最小宽度
        "min_width":1050,
        // 最小高度
        "min_height":600,
        // 标题栏图标,jpg/png,只有windows管用
        "icon": "icon.png",
        // 打开应用的位置, "center"或"mouse"或null
        "position": "center",
        // 最大宽度
        "max_width": 1000,
        // 最小宽度
        "max_height": 1000,
        // 窗口标题,如果你的html文件没有指定title就会默认为这个
        "title": "标题",
        // 是否显示导航栏
        "toolbar": false,
        // 是否允许调整窗口大小
        "resizable": true,
        // 窗口是否置顶
        "always-on-top": false,
        // 是否全屏
        "fullscreen": false,
        // 是否在任务栏显示图标
        "show_in_taskbar": false
    }
}

有兴趣的可以看看官方文档

Node.js
广告