nw.js打包桌面程序

字号+ 编辑: 国内TP粉 修订: 种花家 来源: izhongxia 2023-09-07 我要说两句(0)

nw.js提供了非常便捷的方式,将网站前端程序结合后端API打包成桌面版APP。

安装NW

安装的方式有两种

1. 下载安装包 官网下载 nw.app 的安装包

把安装包放到 Application 的文件夹里面, 可以双击 nwjs.app ,打开应用。

设置别名,方便使用。

// 1. 打开设置别名的文件
vim ~/.bash_profile
// 2.在文件里面添加 上下面这一句
alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"
// 3.使别名生效
source ~/.bash_profile

此时,在命令行输入 nw , 等同双击打开应用

[如果使用了zsh, 可以在 vim ~/.zshrc 里面添加别名 【本人Mac上,别名需要在这里设置才起作用】]


如何使用 nw 打开 项目

用nw.app来传入package.json参数:

nw .    // 当前目录下的 package.json
nw ./xxx/package.json  // 其他目录下的package.json

第二种方法是npm方式安装:

sudo npm install -g nw

由于下载nw,迟迟下载不下来,并且执行 nw 的时候, 一直报错。 后面采用第一种方式。 理论上来讲, npm 上安装好之后, 输入 nw 就可以用了。 【具体需要测试下】


打包项目

在Mac 下打包 应用为一个 demo.app 很简单。

// 1. 把nwjs.app 复制到你记得住的地方,比如项目的根目录,或者其他
cp -R /Applications/nwjs.app ./test.app
// 2. 把项目的代码打包成  一个 nw 文件 【在项目文件夹里面执行这一句,路径自己根据情况修改】
zip -r ../test.app/Contents/Resources/app.nw  *

完成, 双击 test.app 即可打开程序


package.json配置文件案例和解释

因为官方给出的文档没有声明具体结构,所以在这里补充一下。

{
/**指定程序的起始页面。*/
"main": "index.html",
/**字符串必须是小写字母或者数字,可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
"name": "demo",
/**程序描述*/
"description": "demo app of node-webkit",
/**程序版本号*/
"version": "0.1.0",
/**关键字*/
"keywords": ["demo","node-webkit"],
/**bool值,如果设置为false,将禁用webkit的node支持。*/
"nodejs": true,
/**
    * 指定一个node.js文件,当程序启动时,该文件会被运行,启动时间要早于node-webkit加载html的时间。
    * 它在node上下文中运行,可以用它来实现类似后台线程的功能。
    * (不需要可注释不用)
    */
//"node-main": "js/node.js",
/**
    * bool值。默认情况下,如果将node-webkit程序打包发布,那么只能启动一个该应用的实例。
    * 如果你希望允许同时启动多个实例,将该值设置为false。
    */
"single-instance": true,
/**窗口属性设置 */
"window": {
/**字符串,设置默认title。*/
"title": "demo",
/**窗口的icon。*/
"icon": "link.png",
/**bool值。是否显示导航栏。*/
"toolbar": false,
/**bool值。是否允许调整窗口大小。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任务栏显示图标*/
"show_in_taskbar": true,
/**bool值。如果设置为false,程序将无边框显示。*/
"frame": true,
/**字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的宽度。*/
"width": 800,
/**主窗口的的高度。*/
"height": 670,
/**窗口的最小宽度。*/
"min_width": 400,
/**窗口的最小高度。*/
"min_height": 335,
/**窗口显示的最大宽度,可不设。*/
"max_width": 800,
/**窗口显示的最大高度,可不设。*/
"max_height": 670,
/**bool值,如果设置为false,启动时窗口不可见。*/
"show": true,
/**是否在任务栏显示图标。*/
"show_in_taskbar":true,
/**
         * bool值。是否使用kiosk模式。如果使用kiosk模式,
         * 应用程序将全屏显示,并且阻止用户离开应用。
         * */
"kiosk": false
},
/**webkit设置*/
"webkit": {
/**bool值,是否加载插件,如flash,默认值为false。*/
"plugin": true,
/**bool值,是否加载Java applets,默认为false。*/
"java": false,
/**bool值,是否启用页面缓存,默认为false。*/
"page-cache": false
}
}


MAC下修改图标

nw.js的文档虽然语文含含糊糊,但提及了这一块;其他博客里没有任何相关的描述。所以,在这里解释一下:

打包app.nw发现Contents/Resources/nw.icns。这个就是应用图标。把nw.icns遵循苹果图标图片格式改一下。可以使用APPStore里的Image2Icon将PNG/JPEG格式转换为ICNS格式图片,覆盖上去。

Contents/Info.plist含有相关的配置,跟package.json基本没关系,这是MAC系统独有的项目配置文件(苹果粉们开心吗),辛苦大牛们要在各个博客里找一下(官网文档不知道写的什么玩意?)


阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • JS如何防止父节点的事件运行

  • nodejs编写一个简单的http请求客户端代码demo

  • 说一则为什么后端开发人员不选择node.js的原因

  • 使用Sublime Text3 开发React-Native的配置

我要说说
网上嘉宾点评