Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

简单得尝试了一下 node-webkit #61

Open
YIXUNFE opened this issue Mar 10, 2016 · 0 comments
Open

简单得尝试了一下 node-webkit #61

YIXUNFE opened this issue Mar 10, 2016 · 0 comments
Labels
围观 开胃菜 涨姿势

Comments

@YIXUNFE
Copy link
Owner

YIXUNFE commented Mar 10, 2016

简单得尝试了一下 node-webkit

前些日子看到有人用 electron 做了一个音乐播放器，出于好奇就粗略学习了一下比较热门的 node-webkit 和 electron。这篇文章总结学习 node-webkit 后的一点心得。


## 关于 node-webkit

node-webkit 是一款由 C++ 编写，致力于让开发者使用 Web 技术开发不同操作系统下的本地应用的软件。从名字中可以看出，node-webkit 由 Chromium 和 Node.js 结合而成，所以开发者在开发过程中既可以使用传统的 Web 技术，也可以使用 Node.js 给我们带来的新功能。

node-webkit 这个名字已经从 v0.12.0 alpha1 版本开始改名为 NW ，但是我还是喜欢称呼它为 node-webkit，因为个人觉得目前大多数从业者还无法从简单的两个字母上联想到它，而 node-webkit 这个名字显然更有群众基础啦。


## 运行

刚学习嘛，按规矩总是要来个 hello world 作为入门第一步的。先从官网下载 node-webkit，然后开始写我们的代码。

我们的代码至少需要两部分，一个是配置文件 package.json，一个主入口文件，这里就命名为 index.html。

package.json 文件：

{
  "name": "helloworld",
  "main": "index.html"
}

index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

接下来就是运行了。

E:\node-webkit\demo>nw .

由于测试机上已经将 node-webkit 的路径放入环境变量中，所以命令行中输入 nw project/path 即可运行应用。如果不输入项目路径，node-webkit 会启动一个自身的应用，如图：

nw


## 配置项

配置文件 package.json 中可以设置一些配置项：

参数名 类型 描述
main (必填) string 指定一个 APP 主入口文件比如 index.htm
name (必填) string APP 名称，必须具有唯一性
single-instance boolean 是否只允许启动单个实例，true为只允许一个软件实例运行
window object 窗口相关属性，如窗口大小、窗口标题、工具栏、APP 图标等
webkit object 配置 webkit 相关属性，比如外部插件、页面缓存等

详细配置内容可以参考官方文档。


## 打包应用

官方打包教程传送门

由于精力有限，仅列出 Windows 下的包打方案：

  • 将项目目录打成 ZIP 包；
  • 重命名 ZIP 包为 nw 后缀格式；
  • 将 nw.exe 文件与 nw 格式文件合并为一个文件 nw.exe ；
  • 将合并后的 nw.exe 与 nw.pak 和 icudt.dll 放在同一个文件夹下即可

另外官方还提到，如果需要使用一些特别的功能，则需要引入额外的文件。比如需要使用视频音频（video，audio）内容，我们还需要将 ffmpegsumo.dll 文件打包在一起。


## Thanks
@YIXUNFE YIXUNFE changed the title 简单的尝试了一下 node-webkit 简单得尝试了一下 node-webkit Mar 10, 2016
This was referenced Mar 14, 2016
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
围观 开胃菜 涨姿势
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@YIXUNFE