NW.JS教程(一) NW.JS开发入门教程

admin 发布时间:2018-07-07 分类:Web 阅读:41398次 5 条评论

Electron和NW.js是一个可以使用Web开发技术来开发跨平台的桌面级应用的一个框架,而传统桌面应用开发要求懂高级编程语言以及专门的框架。有了Electron和NW.js,你可以将现有Web开发技术运用到仅仅使用HTML、CSS和JavaScript就能开发的桌面应用中。而且,开发出来的应用还能在Windows、Mac和Linux中工作,显著减少了开发和培训的时间。

这篇教程我们重点讲解下NW.js,NW.js是Intel的工程师写的一个基于node.js和chromium的应用程序运行环境。项目地址是:https://github.com/rogerwang/node-webkit。

使用它的好处:

(1)以网络最流行的技术编写原生应用程序的新方法

(2)基于HTML5, CSS3, JS and WebGL而编写

(3)完全支持nodejs所有api及第三方模块

(4)可以使用DOM直接调用nodejs模块

(5)容易打包和分发

(6)支持运行环境包括32位和64位的Window、Linux和Mac OS

使用方法:

第一步,我们先下载NW的运行环境,官网地址:http://nwjs.io/。

打开后有两个下载项,NORMAL和SDK,分别表示运行时和开发调试环境。这里我们学习使用可以选择下载SDK。

第二步,在开发目录新建一个package.json的全局配置文件。

{
  "main": "index.html", 
  "name": "appname",
  "description": "这是应用描述,main表示入口文件",
  "version": "0.0.1", 
  "window": {
    "title": "应用的名称",
    "icon": "app/static/img/logo.jpg",
    "toolbar": true,
    "frame": true,
    "width": 1008,
    "height": 750,
    "position": "center",
    "min_width": 400,
    "min_height": 200
  },
  "webkit": {
    "plugin": true,
    "java": false,
    "page-cache": false    
  },
  "chromium-args" :"-allow-file-access-from-files"
}
  • title : 字符串,设置默认 title。

  • width/height : 主窗口的大小。

  • toolbar : bool 值。是否显示导航栏。

  • icon : 窗口的 icon。

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

  • min_width/min_height : 窗口的最小值。

  • max_width/max_height : 窗口显示的最大值。

  • fullscreen: bool 值。是否全屏显示。

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

  • always-on-top : bool 值。窗口置顶。

  • fullscreen : bool 值。是否全屏显示。

  • show_in_taskbar : 是否在任务栏显示图标。

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

  • "chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样,这行代码允许html和js直接访问本地文件。

第三步,新建一个index.html的文件,<div>Hello World</div>

第四步,测试运行。

  • 将项目文件夹打包成app.zip。

  • 将打包的ZIP拖到nw.exe上运行测试。

第五步,打包exe。

  • 将项目文件夹打包成app.zip,将ZIP的后缀改为nw即app.nw

  • 将app.nw移动到下载的SDK目录下

  • CMD命名行定位到NW目录,输入以下命名:copy /b nw.exe+app.nw app.exe

第六步,运行exe。

关键字词: CSS3ChromeNW.jsNode.js

已有5条留言
  • Aaron
    发布于 2018-07-16 17:08:58  回复该评论
  • 满满的干货,收藏了,谢谢博主分享

发表评论:

◎欢迎您的参与讨论。