使用nw.js封装网页，打包成独立应用

最新推荐文章于 2024-09-25 08:26:24 发布

hawengao

最新推荐文章于 2024-09-25 08:26:24 发布

阅读量6.2k

点赞数 3

分类专栏： node-webkit 文章标签： node-webkit

本文链接：https://blog.csdn.net/hawengao/article/details/99644062

版权

node-webkit 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

nw.js原名node-webkit，它通过Chromium内核，可以在node环境下模拟浏览器运行时，因此可以将js封装成独立应用如.deb, .exe, .app等，从而实现跨平台运行。此外，他还直接兼容Chrome打包程序(Packaged Apps)，尤其适合在Chrome商店2016年停止上架新的打包程序之后，可以让原程序直接运行。

nw.js 安装

1、官网地址https://nwjs.io/，选择对应你自己的系统，选择Normal下的最新安装包下载到本地，我的是Ubuntu64位，所以下载文件是nwjs-v0.35.4-linux-x64.tar.gz；

或者直接打开http://dl.nwjs.io/选择版本、平台进行下载，个人感觉速度会快

2、解压进入

tar -zxvf nwjs-v0.35.4-linux-x64.tar.gz
cd nwjs-v0.35.4-linux-x64

3、检测能否正常运行，如果出现下图窗口，证明运行成功

./nw

nwjs运行

封装网页

1.微信网页版地址为https://wx.qq.com/
2.下面所有操作均在刚才解压的nwjs目录中！！！如 nwjs-v0.35.4-linux-x64

1、创建wechat.html用于包裹网页的html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WeChat</title>
  </head>
  <body>
    <iframe src='https://wx.qq.com/' height=760px; width=900px;></iframe>
  </body>
</html>

2、创建package.json清单文件，其中main字段指定加载上面创建的网页文件，具体解释见下文

{
  "name":"WeChat",
  "main":"wechat.html",
  "window":{
        "id": "wechat",
        "title":"WeChat",
        "toolbar":false,
        "frame":true,
        "position":"center",
        "always-on-top":true,
        "width":1000,
        "height":728,
        "as_desktop": true,
        "show_in_taskbar": true
    },
    "domain": "wechat_app",
    "version": "1.0",
    "dependencies": {}
}

3、运行应用

# 在nwjs的解压目录中执行
./nw .

正常的话会看到熟悉的网页微信登录界面，扫码登录即可

nwjs网页微信登录

各个系统平台打包

Windows打包

下载好nwjs模板文件，如nwjs-v0.35.4-win-x64.zip，解压缩，进入到里面的nwjs-v0.35.4-win-x64文件夹
新建上文中的package.json和wechat.html
右键选中package.json和wechat.html这俩文件，添加到zip文件，生成wechat.zip，必须保证zip文件打开直接就是这俩文件，里面没有嵌套文件夹
打开cmd，同样进入到nwjs-v0.35.4-win-x64文件夹，执行copy /b nw.exe+wechat.zip wechat.exe
上述步骤会生成wechat.exe应用程序，双击打开即可

Tips: 如果报错如下：

The program can't start because nw_elf.dll is missing from your computer. Try reinstalling the program to fix this program.

原因是你生成的wechat.exe不是在上文的nwjs-v0.35.4-win-x64模板目录中，很可能是因为移动位置导致了目录错误，因为生成的exe文件不能脱离模板目录独立运行。解决方法也很简单，将exe文件重新放回nwjs模板目录中，双击即可运行。即如果需要移动目录安装位置或者给别人使用，需要将nwjs-v0.35.4-win-x64作为整体移动。

Linux && Mac打包

下载好nwjs模板文件，如nwjs-v0.35.4-linux-x64.tar.gz
解压，里面有nwjs-v0.35.4-linux-x64文件夹，并进入文件夹
新建上文中提到的package.json和wechat.html
将package.json和wechat.html俩文件添加到wechat.zip压缩包中，zip wechat.zip package.json wechat.html
将nw和wecaht.zip叠加到wechat中，cat nw wechat.zip > wechat
赋予执行权限chmod +x wechat
./wechat打开应用

Tips: 如果报错如下

/home/qii/wechat: error while loading shared libraries: libnw.so: cannot open shared object file: No such file or directory

跟windows下原因一致，因为生成的可执行文件不能脱离nwjs模板目录运行，将执行文件放回到nwjs-v0.35.4-linux-x64再执行即可。如果安装目录需要移动或者给别人使用，需要将nwjs-v0.35.4-linux-x64整体移动。

Linux下桌面图标生成

新建/usr/share/applications/wechatweb.desktop桌面文件如下，下次桌面直接双击即可运行

[Desktop Entry]
# 如果未生成wechat可执行文件，用下面的这句exec 替换成你自己的绝对路径
#Exec=/home/qii/Desktop/nwjs-v0.35.4-linux-x64/nw /home/qii/Desktop/nwjs-v0.35.4-linux-x64
# 如果生成了wecaht可执行文件，用下面的这句exec 绝对路径
Exec=/home/qii/Desktop/nwjs-v0.35.4-linux-x64/wechat
Name=WeChatWeb
StartupNotify=false
Terminal=false
Type=Application
# 应用图标 自己替换即可
Icon=/home/qii/Desktop/nwjs-v0.35.4-linux-x64/wechat.jpg

package.json文件配置项详解

详情可参考官网地址http://docs.nwjs.io/en/latest/References/Manifest%20Format/

配置项	说明
name	应用名称
main	主加载文件，如index.html或者app.js
domain	chrome拓展唯一id，设置为xxx，最终url地址为`chrome-extension://xxx`
bg-script	后台脚本，应用加载时运行
user-agent	自定义ua
crash_report_url	应用crash是报告地址
inject_js_start	程序开始时注入的js脚本
inject_js_end	程序结束时注入的js脚本
`window`	应用窗口设置，子配置项如下
id	程序唯一id，同一id程序相关操作会被记录，如上次打开的窗口位置等
title	默认窗口名称
width	窗口宽度
height	窗口高度
icon	应用icon
frame	边框模式，false时窗口无边框包裹
position	打开窗口时的位置，可选项 null center mouse
min_width	最小宽度
min_height	最小高度
max_width	最大宽度
max_height	最大高度
resizable	窗口是否可以拖动调整尺寸
as_desktop	linux专用，官方解释 show as desktop background window under X11 environment
show	应用打开时是否隐藏应用

Chrome打包程序兼容

Chrome开发者平台通告：自2016年11月21日起，所有新发布的封装应用或托管应用都仅限 Chrome 操作系统用户使用（Windows、Mac 或 Linux 用户均无法使用这些应用）。我们将于 2017 年 12 月中旬从 Chrome 网上应用店的搜索和浏览功能中移除所有封装应用和托管应用。现有的应用均继续适用于各大平台，并会继续收到更新。

所以2016.11.21之后的打包应用只能用于Chrome OS，如果想在Mac Linux Windwos继续使用的话，可以通过nwjs本地实现，操作如下：

1、直接进入PackagedApps项目文件夹，如果你本地没有，用下面便签应用例子

# github clone下来
git clone https://github.com/qishibo/MinimalistNote.git
# 进入应用目录
cd MinimalistNote

2、运行应用

# 运行命令，其中nw执行路径要为绝对路径
# 有个坑 nwjs-v0.35.4-linux-x64目录下需要删除掉刚才创建的package.json文件，否则nw优先找到自己所在目录的package.json，而不是以当前目录为数据目录
/home/qii/Desktop/nwjs-v0.35.4-linux-x64/nw .

便签应用效果如下

nwjs便签应用

遇到的一些坑

/path_to_nw/nw .运行应用时，其实是以nw可执行文件所在目录(即nw安装目录nwjs-v0.35.4-linux-x64)为根目录，找到里面的package.json运行，而不会以当前执行命令所在目录执行！所以在当前目录无论怎么修改package.json都不会生效。表面现象就是无论怎么修改文件，nwjs应用永远不会刷新，不会更改
nwjs生成的网页封装应用会同正常浏览器一样缓存Cookie数据，LocalStorage数据等，如果需要强制删除，其实缓存文件都在~/.config/WeChat下，一个应用一个文件夹，删除文件夹即可
如果报错清单文件缺失或不可读取，则表明nw没有找到对应的package.json文件，确保你的which nw目录或者nw可执行文件所在目录存在package.json文件