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。
发布于 2019-05-23 16:44:29 回复该评论
发布于 2018-08-13 16:05:28 回复该评论
发布于 2018-08-08 17:39:04 回复该评论
发布于 2018-07-16 17:08:58 回复该评论
发布于 2018-07-10 17:06:04 回复该评论
发表评论:
◎欢迎您的参与讨论。