node-webkit学习笔记
基础
-
概念定义
基于node.js和chromium的应用程序实时运行环境，可运行通过HTML(5)、CSS(3)、 Javascript来编写的本地应用程序。node.js和webkit的结合体，webkit提供DOM操作， node.js提供本地化操作；且将二者的context完全整合，可在HTML代码中直接使用 node.js的API。 -
项目官网: http://nwjs.io/
-
学习资料:
安装
-
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
网友评论