node-webki 基本程序结构
2.1 基本程序结构
如上图,是一个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 必须的配置
在上面的配置中main和name是必须的属性。
main指定程序的起始页面。
name字符串必须是小写字母或者数字,可以包含"." 或者"_"或者"-" ,不允许带空格。name必须全局唯一。
2.2.2 特性控制字段
nodejs
bool值,如果设置为false,将禁用webkit的node支持。
在上一篇文章(node-webkit学习(1)hello world)中的示例,在helloWorld.html中,输出了node.js的版本信息,现在我们在pakage.json中禁用node。
结果如下:
版本信息没有输出,同时在终端会出现未捕获异常:
[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>
<bodyοnlοad="process.mainModule.exports.callback0()">
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version); </script>
</body>
</html>
修改package.json,添加“node-main”配置。
重新打包所有文件,运行。
不停的刷新页面,可以看到i值在不断增加,证明node-main中的代码在单独的contex中运行。
single-instance
bool值。默认情况下,如果将node-webkit程序打包发布,那么只运行同时启动一个该应用的实例。如果你希望允许同时启动多个实例,将该值设置为false。
window
设置窗口外观。由一组子属性构成,分别如下:
l title
字符串,设置默认title。
l width/height
主窗口的大小。
l toolbar
bool值。是否显示导航栏。
现在修改package.json如下:
重新运行程序,结果如下:
在图中我们可以看到,窗口的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
是否在任务栏显示图标。
如上图,配置程序在任务栏显示,在windows和ubuntu下运行,都可以看到显示任务栏图标。
l frame
bool值。如果设置为false,程序将无边框显示。
示例package.json:
运行效果如下:
默认情况下,无边框的程序,将不可拖动。
可以通过添加如下样式来使窗口可拖动:
<html>
<head>
<style>
body
{
-webkit-user-select:none;
-webkit-app-region:drag;
}
</style>
</head>
<body οnlοad="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字段是必须字段,其他两个(email和web)是可选字段。
contributors
贡献者信息,格式同maintainers,按照约定,第一个contributor是该应用的作者。
bugs
提交bug的url。可以是“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"
}
]
type和url指定可以下载或者克隆程序包的地址,如果程序包不在根目录中,需要在path属性指定相对目录。
2.3 小结
本篇文章基本涵盖了package.json的所有字段的说明,有些字段本人也不明白实际用途,还有些字段现阶段node-webkit也没有使用(description,version,keywords,maintainers,contributors,bugs,licenses,repositories)。
node-webki 基本程序结构相关推荐
- node.js ejs_如何在Node.js应用程序中使用EJS模板
node.js ejs by Jennifer Bland 詹妮弗·布兰德(Jennifer Bland) 如何在Node.js应用程序中使用EJS模板 (How to use EJS Templat ...
- JavaScript 编程精解 中文第三版 二、程序结构
二.程序结构 原文:Program Structure 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了<JavaScript 编程精解(第 2 版)> A ...
- 2021年大数据Flink(三十一):Table与SQL案例准备 依赖和程序结构
目录 案例准备 依赖 程序结构 案例准备 依赖 https://ci.apache.org/projects/flink/flink-docs-release-1.12/d ...
- 构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
- [转]使用设计模式改善程序结构(二)
使用设计模式改善程序结构(二) 在本系列的 第一篇文章中,描述了如何通过设计模式来指导我们的程序重构过程,并且着重介绍了设计模式意图.动机的重要性.在本文中我们将继续上篇文章进行讨论,这次主要着重于设 ...
- 简述python程序结构_Python程序结构
Python中有三种程序结构:顺序结构.选择结构.循环结构 顺序结构:python是一门解释型语言,它的执行过程一般是解释一行,执行一行. 选择结构:python中只有一种选择结构:if-else选择 ...
- C#程序结构 基本语法
在学习 C# 编程语言的基本构建块之前,先来看一下最简单的 C# 程序结构,以便将其作为即后续章节的学习参考. 创建Hello World程序 这个简单的 C# 程序由以下部分组成: 命名空间声明 一 ...
- 开发笔记13 | 部署 Node.js 应用程序到云 ECS
<<系列文章集 前言 在之前的一篇文章中,我们介绍了 如何将一个本地的 Java 应用程序直接部署到阿里云 ECS ,有不少读者反馈,在本文中,我们来介绍如何部署 Node.js 应用程序 ...
- c++程序目录结构_C程序结构
C程序结构 进入我们的编程入门程序Hello world实例: C 程序主要包括以下部分: 预处理器指令 函数 变量 语句 & 表达式 注释 输出hello world程序: #include ...
最新文章
- php上传头像的代码,php头像上传预览实例代码
- 【转】Matlab中特殊符号的写法
- 微软职位内部推荐-Principal Development Lead
- SVN中怎样忽略当前文件不提交
- 数学在计算机科学上的应用文献,浅谈数学在计算机科学及应用中的作用
- 求阶乘的和(信息学奥赛一本通-T1091)
- Maven学习总结(20)——Maven pom.xml配置再体会
- php7单独运行,如何让PHP 7运行更加神速
- 《搭建Centos7之一》
- 5年了...Capstone 终于升级到4.0!
- 解决Python安装后目录下缺失Scripts文件夹
- 数据库网页搭建教程(二)——数据库网页设计
- Delphi 的并行计算
- maven的全局setting及用户setting
- OKR-VUCA时代目标管理利器实践分享
- 责任链模式:“张三为了纪念王二请假的悲催经历想出来的一种设计模式”
- 根据文本信息自动生成图片怎么操作?值得收藏的几种转换方法
- 中国经济学家与管理学家的错位
- 论文投稿PACS如何填写
- Element Plus
热门文章
- 互联网原理和html基础,计算机网络基础知识习题及答案(八)
- file java详解_Java中File的实例详解
- 训练日志 2019.2.24
- Summarize to the Power of Two(CF-1005C)
- NOIP2016普及组第一题:买铅笔
- 38 CO配置-控制-产品成本控制-成本对象控制-实际成本核算/物料分类帐-分配材料分类帐类型给评估区域
- md5加密后怎么解密_手机怎么解密已加密的PDF?不会还有人不知道这招吧?
- linux 安装redis_Linux安装redis及安装php-redis扩展
- OpenVINO InferenceEngine之Core类
- 英语四六级听力考试选项技巧