node-webkit学习笔记

2015-09-28 本文已影响4330人 200cc

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中执行脚本
```
...
<body onload="process.mainModule.exports.callbackIndex()">
...
```
刷新页面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

node-webkit学习笔记

node-webkit学习笔记

基础

安装

应用开发

应用打包

API

配置文件package.json

窗口

猜你喜欢

热点阅读