node-webkit学习(2)基本结构和配置

node-webkit学习(2)基本结构和配置

/玄魂

目录

node webkit学习(2)基本结构和配置... 1

前言... 1

2.1  基本程序结构... 2

2.2  package.json. 2

2.2.1 必须的配置... 3

2.2.2 特性控制字段

2.3  小结

... 4

 

前言

几个月前,要开发一个简易的展示应用,要求支持离线播放(桌面应用)和在线播放(web应用)。

当时第一想到的是flex,同一套代码(或者只需少量的更改)就可以同时运行在桌面和浏览器上。由于很多展现效果要全新开发,我想到了impress.js(https://github.com/bartaz/impress.js/)。如果选择impress.js,就意味着要将html5作为桌面应用,当时想到要封装webkit,但是本人对这方面也不是很熟悉,时间也很有限,就又沿着这个方向搜索,找到了node-webkit(https://github.com/rogerwang/node-webkit)

node-webkit解决了我通过htmljs来编写桌面应用的难题

至于node-webkit的定义,按照作者的说法:

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

node-webkit学习(2)基本结构和配置

2.1  基本程序结构

node-webkit学习(2)基本结构和配置

如上图,是一个nw程序的基本组织结构,在根目录下package.json,程序的配置文件;index.html(可以是任意名称),应用的启动页面;js/css/resources,应用的样式、脚本、html、图片等资源文件;node_modules存放node.js的扩展组件。

nw在启动应用程序时,首先要读取package.json文件,初始化基本属性,下面我们看看package.json的参数。

2.2  package.json

鄙视不标明出处的转载,更多相关内容,欢迎访问玄魂的博客(node webkit学习(2)基本结构和配置)

 

一个完整的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

  }

}

2.2.1 必须的配置

在上面的配置中mainname是必须的属性。

main指定程序的起始页面。

name字符串必须是小写字母或者数字,可以包含"." 或者"_"或者"-" 不允许带空格name必须全局唯一。

2.2.2 特性控制字段

nodejs

bool值,如果设置为false,将禁用webkitnode支持。

在上一篇文章(node-webkit学习(1hello world)中的示例,在helloWorld.html中,输出了node.js的版本信息,现在我们在pakage.json中禁用node

node-webkit学习(2)基本结构和配置

结果如下:

node-webkit学习(2)基本结构和配置

版本信息没有输出,同时在终端会出现未捕获异常:

[10894:0409/144559:INFO:CONSOLE(8)] "Uncaught ReferenceError: process is not defined", source: file:///tmp/.org.chromium.Chromium.F4YVql/helloword.html (8)

node-main

字符串。指定一个node.js文件,当程序启动时,该文件会被运行,启动时间要早于node-webkit加载html的时间。它在node上下文中运行,可以用它来实现类似后台线程的功能。

node-main脚本中还可以访问全局的“window”对象,它指向DOM窗口,但是如果页面导航发生变化,访问到的window对象也会发生变化。因为它执行时间要早于DOM加载,所以要等页面加载完毕,才能使用“window”对象。

同时,在DOM页面中,可以通过process.mainModule来获取node-main信息。

继续修改之前的helloworld,在程序源文件夹下,添加一个hello.js,内容如下:

var i = 0;
exports.callback0 = function () {
    console.log(i + ": " + window.location);
    window.alert ("i = " + i);
    i = i + 1;
}

 修改helloworld.html为:

<html>

<head>

<title>Hello World!</title>

</head>

<bodyonload="process.mainModule.exports.callback0()">

<h1>Hello World!</h1>

We are using node.js <script>document.write(process.version); </script>

</body>

</html>

 

node-webkit学习(2)基本结构和配置

修改package.json,添加“node-main”配置。

node-webkit学习(2)基本结构和配置

重新打包所有文件,运行。

node-webkit学习(2)基本结构和配置

不停的刷新页面,可以看到i值在不断增加,证明node-main中的代码在单独的contex中运行。

node-webkit学习(2)基本结构和配置

single-instance

bool值。默认情况下,如果将node-webkit程序打包发布,那么只运行同时启动一个该应用的实例。如果你希望允许同时启动多个实例,将该值设置为false

window

设置窗口外观。由一组子属性构成,分别如下:

l  title

字符串,设置默认title

l  width/height

主窗口的大小。

l  toolbar

bool值。是否显示导航栏。

现在修改package.json如下:

node-webkit学习(2)基本结构和配置

重新运行程序,结果如下:

node-webkit学习(2)基本结构和配置

在图中我们可以看到,窗口的title、大小和显示位置都发生 了变化,同时导航栏消失 了。

l  icon

窗口的icon

l  position

字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。

l  min_width/min_height

窗口的最小值。

l  max_width/max_height

窗口显示的最大值。

l  as_desktop

bool值。(暂时还没明白具体作用)

l  resizable

bool值。是否允许调整窗口大小。

l  always-on-top

bool值。窗口置顶。

l  fullscreen

bool值。是否全屏显示。

l  show_in_taskbar

是否在任务栏显示图标。

node-webkit学习(2)基本结构和配置

如上图,配置程序在任务栏显示,在windowsubuntu下运行,都可以看到显示任务栏图标

node-webkit学习(2)基本结构和配置

l  frame

bool值。如果设置为false,程序将无边框显示。

示例package.json:

node-webkit学习(2)基本结构和配置

运行效果如下:

node-webkit学习(2)基本结构和配置

默认情况下,无边框的程序,将不可拖动。

可以通过添加如下样式来使窗口可拖动:

<html>

<head>

    <style>

        body

        {

            -webkit-user-select:none;

            -webkit-app-region:drag;

        }

    </style>

</head>

<body onload="process.mainModule.exports.callback0()">

    <h1>Hello World!</h1>

    We are using node.js

    <script>document.write(process.version); </script>

</body>

</html>

l  show

bool值,如果设置为false,启动时窗口不可见。

l  kiosk

bool值。是否使用kiosk模式。如果使用kiosk模式,应用程序将全屏显示,并且阻止用户离开应用。

webkit

webkit属性,用来控制webkit一些特性的打开或者关闭,由一组属性组成。

l  plugin

bool值,是否加载插件,如flash,默认值为false

l  java

bool值,是否加载Java applets,默认为false

l  page-cache

bool值,是否启用页面缓存,默认为false

user-agent

应用发起http请求时,使用的user-agent头信息。下列占位符可以被替换:

·             %name: 替换配置中的name属性

·             %ver: 替换配置中的version属性

·             %nwver: node-webkit版本信息替换.

·             %webkit_ver: WebKit 引擎的版本信息替换.

·             %osinfo: 操作系统和 CPU 信息 替换,在浏览器的 user agent 字符串中可以被看到.

示例配置:

{

  "name": "nw-demo",

  "main": "helloword.html",

  "nodejs":true,

  "node-main":"hello.js",

   "window": {

    "title": "设置默认",

    "toolbar": true, 

    "width": 300, 

    "height": 200,

   "resizable":true,

   "show_in_taskbar":true,

   "frame":true,

   "kiosk":false

  },

  "webkit":{

  "plugin":true

  }

 

   "user-agent": "测试 %ver  %nwver %webkit_ver  windows7" /* 替换占位符内容即可 */

}

chromium-args

string类型,自定义chromium启动参数。详细的参数列表参考:http://src.chromium.org/svn/trunk/src/content/public/common/content_switches.cc

js-flags

string类型,传递给js引擎(V8)的参数。例如,想启用Harmony Proxies Collections功能,可以使用如下配置方式:

{

  "name": "nw-demo",

  "main": "index.html",

  "js-flags": "--harmony_proxies --harmony_collections"

}

inject-js-start / inject-js-end

string 类型。指定一个js文件。

对于inject-js-start,该js文件会在所有css文件加载完毕,dom初始化之前执行。

对于inject-js-end,该js文件会在页面加载完毕,onload事件触发之前执行。

snapshot

string类型,应用程序的快照文件路径。包含编译的js代码。使用快照文件可以有效的保护js代码。后续文章会详细介绍。

dom_storage_quota

int类型,dom 存储的限额(以自己为单位)。建议限制为你预想大小的2倍。

no-edit-menu

bool值,Edit菜单是否显示。仅在Mac系统下有效。

description

简要描述

version

版本信息

keywords

关键词

maintainers

软件维护者信息,是一个数组,示例如下:

"maintainers":[ {

   "name": "Bill Bloggs",

   "email": "billblogs@bblogmedia.com",

   "web": "http://www.bblogmedia.com",

}]

每个维护人的信息中,name字段是必须字段,其他两个(emailweb)是可选字段。

contributors

贡献者信息,格式同maintainers,按照约定,第一个contributor是该应用的作者。

bugs

提交bugurl。可以是“mailto:”或者“http://”格式。

licenses

一个数组,可以包含多个声明。每个声明包含“type”和“url”两个属性,分别指定声明的类型和文本。

示例如下:

"licenses": [

   {

       "type": "GPLv2",

       "url": "http://www.example.com/licenses/gpl.html",

   }

]

repositories

程序包的存储地址数组。示例如下:

"repositories": [

       {

            "type": "git",

            "url": "http://github.com/example.git",

            "path": "packages/mypackage"

       }

]

typeurl指定可以下载或者克隆程序包的地址,如果程序包不在根目录中,需要在path属性指定相对目录。

2.3 小结

本篇文章基本涵盖了package.json的所有字段的说明,有些字段本人也不明白实际用途,还有些字段现阶段node-webkit也没有使用(descriptionversionkeywordsmaintainerscontributorsbugslicensesrepositories)。

下一篇文章介绍常用的native api

更多相关内容,欢迎访问玄魂的博客(node webkit学习(2)基本结构和配置)

 

ps:对此文章感兴趣的读者,可以加qq群:Hacking:303242737;Hacking-2群:147098303Hacking-3群:31371755hacking-4:201891680;Hacking-5群:316885176

 

node-webkit学习(2)基本结构和配置,布布扣,bubuko.com

node-webkit学习(2)基本结构和配置

上一篇:ExtJS入门教程05,grid的异步加载数据


下一篇:如何创建一个基于jquery的编辑器