node-webkit学习笔记

node-webkit学习笔记

基础

• 概念定义

      基于node.js和chromium的应用程序实时运行环境，可运行通过HTML(5)、CSS(3)、
  Javascript来编写的本地应用程序。node.js和webkit的结合体，webkit提供DOM操作，
  node.js提供本地化操作；且将二者的context完全整合，可在HTML代码中直接使用
  node.js的API。
  

• 项目地址: https://github.com/nwjs/nw.js

• 项目官网: http://nwjs.io/

• 学习资料:

  • http://www.cnblogs.com/xuanhun/tag/node-webkit/

安装

• Windows

  下载后解压, 双击目录下nw.exe文件, 如弹出提示窗口, 则表示安装成功.

应用开发

• HelloWorld

  • 在nw安装目录下创建应用的工作目录, 如: prjHelloWorld

  • 进入工作目录, 创建文件index.html和package.json

  • 编写package.json文件, 输入:

    {"name": "nw-helloWorld", "main": "index.html"}
    

  • 将工作目录拖动到nw.exe, 就能将应用运行起来.

    或是将工作目录下的文件打包为zip文件,如prjHelloWorld.zip, 通过命令行启动应用D:\>nw.exe prjHelloWorld.zip.

• 应用的目录结构(推荐)

  APP
  |-- package.json    // 应用的配置文件
  |-- index.html      // 应用的启动页面
  |-- js/             // 应用的脚步文件
  |   |-- ...
  |-- css/            // 应用的样式文件
  |   |-- ...
  |-- resources/      // 应用的资源文件
  |   |-- ...
  |-- node_modules/   // 应用使用的nodejs的扩展组件
  |   |-- ...
  

应用打包

• 打包为exe文件

  • 将应用的工作目录先打包为zip文件,并修改后缀为.nw, 如prjHelloWorld.nw

  • 执行命令 copy \b nw.exe+prjHelloWorld.nw AppHelloWorld.exe

  • 生成的AppHelloWorld.exe即为已打包好的应用文件.

    备注: 生成的应用文件现在还无法独立运行, 它必须依赖于nw安装目录下*.dll等文件.

  • 使用第三方工具进行再次封装.如官方推荐的Enigma Virtual Box.详细使用说明见wiki.

API

配置文件package.json

一个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": 500,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
    "plugin": true
  }
}

• main

  (string) 必要参数. 用于设置应用的启动页面. 可以使用文件名或是一个基于package.json的相对路径.

  ps: 不要使用诸如index.html?foo=bar这样的带参数的路径.nwjs会将连同参数在内的全部的字符识别为一个文件.

  pps: 当你需要在应用中进行传参时, 可以使用App protocol.

• name

  (string) 必要参数. 设置应用的包名(package name).名字必须是全局唯一的.nwjs会对name进行统一的存储管理.

  名称必须是小写的,由字母和数字组成,可包含字符".", "_", "-".

• nodejs

  (boolean) 设置开关nodejs支持.

• node-main

  (string) 指定一个node.js文件在程序启动时执行. 其运行于node上下文中, 可以用来实现类似后台线程的功能.
  示例:

  设以下为node-main指定的脚本文件main.js的内容.

  var i  = 0;
  exports.callbackIndex = function() {
      window.alert("i = " + i);
      i += 1;
  }
  

  我们在页面index.html的onload中执行脚本

  ...
  
  ...
  

  刷新页面index.html, 可以发现i的值再不断增长,而不会被重置.

• single-instance

  (boolean) 设置是否支持开启多个运行实例. 默认为false,即默认情况下只能启动一个应用的实例.

• window

  (object) 设置应用的窗口.

  • title

    (string) 设置窗口的标题.

  • width/height

    (int) 设置窗口的宽高.

  • min_width/min_heigth

    (int) 设置窗口的最小宽高

  • max_width/max_height

    (int) 设置窗口的最大宽高

  • toolbar

    (boolean) 设置窗口的导航工具栏

  • icon

    (String) 窗口的icon

  • position

    (String) 窗口的打开位置. 可设置为: null, center, mouse

  • as_desktop

    (boolean) X11运行环境下的设置

  • resizable

    (boolean) 设置窗口大小是否可变

  • always-on-top

    (boolean) 设置是否永远居于其他窗口的上层

  • visible-on-all-workspaces

    (boolean) 是否在多个工作空间可见.目前仅支持Mac OS X和Linux

  • fullscreen

    (boolean) 设置窗口是否全屏化.

  • show_in_taskbar

    (boolean) 设置窗口是否在任务栏显示. 默认为true

  • frame

    (boolean) 设置窗口是否无边框

    当设置为无边框模式后, 默认情况下, 无法执行拖动的操作.可以添加样式{-webkit-app-region: drag}到body或是任意页面元素,是窗口变为可拖动. (?似乎会引起右键菜单的问题?)

  • show

    (boolean) 如果设置为false, 则应用在启动后隐藏

  • kiosk

    (boolean) 设置kiosk模式. 在此模式下, 应用默认全屏,并阻止用户从应用中离开.

  • transparent

    (boolean) 开启透明窗口模式. 默认为false

    用于控制css中的透明度设置.

• webkit

  (object) 设置应用的webkit.

  • plugin

    (boolean) 是否加载浏览器插件,如flash等. 默认为fasle

  • java

    (boolean) 是否加载Java applets. 默认为false

  • page-cache

    (boolean) 是否允许页面缓存. 默认为false

• user-agent
  (String) 设置应用发起的http请求中的User-Agent信息

• node-remote

• chromium-args

• js-flags

• inject-js-start/inject-js-end

• additional_trust_anchors

• snapshot

• dom_storage_quota

• no-edit-menu

• description

• version

• keywords

• maintainers

• contributors

• bugs

• licenses

窗口