nw.js html5,用nw.js构建项目
我是又忙又懒。
跟electron一样,nw.js也是一个使用前端技术(html、css、JavaScript)来构建pc端程序的一个框架。不过相比于electron,nw.js热度可能没有这么高涨,社区的维护人员人数上也不及electron(谁让electron是github团队在维护呢...)。逼乎上边也有对这两个框架之间的差别有过评价——用Nodejs开发桌面应用。NW.js 和 Electron 各有什么优缺点,你选择哪个?。大家的答案几乎是一边倒的倾向于electron。那么nw.js就没有什么比electron要优越的地方了吗?对于我来说,那就是可以兼容windows xp系统......(痛苦状脸)
初始化项目
首先,确保你已经安装好了node.js的环境。
npm init
接下来就是常规的一些常规的填写:
package name: (nw-demo)
version: (1.0.0) 0.1.0
description: a nw.js demo
entry point: (index.js) index.html
test command:
git repository:
keywords: nw.js demo
author: classLfz
license: (ISC)
About to write to C:\classlfz\github\nw-demo\package.json:
{
"name": "nw-demo",
"version": "0.1.0",
"description": "a nw.js demo",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"nw.js",
"demo"
],
"author": "classLfz",
"license": "ISC"
}
Is this ok? (yes) yes
这里注意到main的值不是main.js之类的js执行文件,而是index.html这类的html文件。其实,nw.js是支持main.js之类的js执行文件作为入口的,而且还提供了桌面应用启动前需要执行的一些操作的条件。但是,因为我们这里仅仅只是一个demo,所以就不折腾了。详细的内容可以查看nw.js的官方文档的Getting Started章节。
这时候,我们就得到了一个package.json文件。
完善package.json
为了让nw.js能够完整的了解我们需要的桌面应用的一些常规的设置,我们需要对package.json补充一些内容:
{
"name": "nw-demo",
"version": "0.1.0",
"description": "nw.js demo",
"main": "index.html",
"window": {
"title": "nw-demo", // 应用标题
"width": 840, // 应用初始化宽度
"height": 600, // 应用初始化高度
"toolbar": true, // 是否开启调试工具
"resizable": false, // 应用是否可以调整高度以及宽度
"icon": "images/icon.png" // 应用图标路径(相对路径)
},
"build": {
"nwVersion": "0.14.7"
},
"directories": {
"test": "test"
},
"devDependencies": {
"nwjs-builder-phoenix": "^1.14.3"
},
"scripts": {
"start": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
"dist": "build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
},
"repository": {
},
"keywords": [
"nw.js",
"demo"
],
"author": "classLfz",
"license": "ISC",
"dependencies": {
}
}
从上边可以看到,我们添加了一个window的字段,这里是告诉nw.js初始化这个桌面应用的一些参数。
编写index.html
然后,很简单的我们编写一个index.html作为应用主页。如果你的应用添加了前端路由的话,只要在main字段添加初始化的url路径即可,像这样:index.html/login。
运行与打包应用
细心的你或许已经发现了,上边的package.json还添加了几个script脚本,这个依赖于nwjs-builder-phoenix这个node.js模块,我们可以轻松的实现在命令行里运行/打包nw.js的桌面应用。
# 安装nwjs-builder-phoenix
npm install --save-dev nwjs-builder-phoenix
# 运行
npm run start
# 打包
npm run dist
不过还有一个nw.js的镜像的问题需要注意的,因为墙的原因,我们需要修改一下nw.js的镜像的。就像package.json里边一样,将mirror的值改为https://npm.taobao.org/mirrors/nwjs/就可以了。
nw.js html5,用nw.js构建项目相关推荐
- 基于HTML5 Boilerplate创建自己的项目
web 开发团队的一个常见实践是创建一组标准文件,团队成员基于它们开始 web 开发流程,包括一个公共文件结构.基本命名惯例和标准库. 这样做能够更容易启动并运行一个项目.它还能将开发人员引向内部编码 ...
- python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理 从头新建一个Django项目 新建一个前端页面,使用vue应用 在Django中设 ...
- 转载: 我如何使用 Django + Vue.js 快速构建项目
原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...
- vue.js 构建项目_使用Vue.js和AWS Amplify构建Chatbot
vue.js 构建项目 Over the last few years, chatbots have exploded in popularity. It makes sense that busin ...
- next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目,从构建到发布,兼容pc+移动端
简介:该教程兼容pc+移动端,如只需一端,可忽略兼容部分教程,根据需要运行的客户端构建项目 antd官网:https://ant.design/components/overview-cn/ antd ...
- gulp构建项目(七):gulp-uglify压缩js以及检查js语法错误
需求分析:将js文件压缩成一行,减少js文件的大小.压缩过程中如果遇到js语法错误,将会报错并且压缩会被终止.所以我们需要: 在开发环境下,编写js代码时,要监听并检查js文件的语法,避免语法错误导致 ...
- html5怎么兼容js 插件,Modernizr.js入门指南(HTML5CSS3浏览器兼容插件)
HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...
- 上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
- heX:用HTML5和Node.JS开发桌面应用
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
- html5 自动扣图,js+html5 canvas实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
最新文章
- yum工具对软件包安装,删除,更新介绍
- 震惊!!用图形界面装B居然只需要短短110行代码!!
- Bugzill 备份
- php扩展memcached和memcache的安装配置方法
- 51nod1676-无向图同构【乱搞】
- LeetCode 1090. 受标签影响的最大值(优先队列)
- JSP学习笔记(六十二):struts2中的Lambda表达式
- 点点滴滴积累——基于XMLSchema与Annotation的几种Advice的规则
- 【转】HttpModule和HttpHandler(续)
- 字符编码(1)-- 基本概念
- Ubuntu16.04.2中安装minidwep
- Caused by: org.hibernate.AssertionFailure: Subclass has to be binded after it's mother class:
- 2019年阿里巴巴暑期实习面经--数据研发工程师--口碑
- PS——制作一寸照片、小二寸照片、二寸照片
- java protobuf extend_protobuf中extension的使用
- Fibo Rule规则引擎可视化
- 原生js实现轮盘抽奖,控制中奖概率(完整示例)
- 正则表达式 Exel单元格
- 艾森哲面试 Accenture
- 多线程发生异常怎么处理咩?