NWjs中文网

Electron中文网

一些需要了解的历史与特性，其实就是 NW.js 和 Electron的争议，建议还是亲自阅读一下各自的官网说明

1、下载SDK版工具

从淘宝NPM镜像下载，速度飞快，我选择最新的 https://npm.taobao.org/mirrors/nwjs/v0.41.2/nwjs-sdk-v0.41.2-win-x64.zip 版本，对应 Chromium 77 + Node 12.9.1

然后就可以按照官网快速入门例子，就像构建一个Node项目一样从package.json起手，首先构建一个静态页面的应用。

2、编辑源文件

准备好package.json和index.html两个文件

{

    "name": "helloworld",

    "main": "index.html"

}

注意：Windows系统的默认编码是GBK，而我们经常写代码用的是UTF-8（VS除外），这里index,html的编码格式就得改一改了，否则就像CMD黑窗口一样，UTF-8中文显示乱码

<!DOCTYPE html>

<html>

  <head>

    <title>Hello World-这是标题!</title>

  </head>

  <body>

    <h1>Hello World-这是正文!</h1>

  </body>

</html>

3、运行应用

在这之前，我先配置一下环境变量，当然你也可以直接把应用拖到解压后的 nwjs-sdk-v0.41.2-win-x64 目录下去运行，不过作为一个balabalabala...，我还是要配个SDK的环境变量，就可以在别的目录下写应用代码了

注意：准备好静态文件，配好环境变量后要开始运行应用了，这里用的是你的应用的整个目录，而不是package.json或index.html某个文件，效果如下

4、打包应用

参考 https://www.jianshu.com/p/3337701f9b80，或者手动打包 https://www.cnblogs.com/sener/p/8366164.html

这个比较坑，方式有好几种，这里选择推荐的 nwjs-builder-phoenix 工具打包，试了几次才成功

首先需要把package.json文件补全

{

  "name": "helloworld",

  "version": "0.1.0",

  "description": "this is first nw app",

  "main": "index.html",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dist": "build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .",

    "start": "run --x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ."

  },

  "author": "jxh",

  "license": "ISC",

  "build": {

    "nwVersion": "0.41.2"

  },

  "dependencies": {},

  "devDependencies": {

    "nwjs-builder-phoenix": "^1.15.0"

  },

  "window": {

    "title": "hello nw",

    "width": 840,

    "height": 600,

    "toolbar": true,

    "resizable": false,

    "icon": "./hello.png"

  }

}

前面的名称，版本，描述不用多说，mian是应用入口，参照官网说明

scripts是打包脚本，参照 https://github.com/evshiron/nwjs-builder-phoenix 说明，里面有个配置例子 https://github.com/evshiron/nwjs-builder-phoenix/blob/master/assets/project/package.json

--tasks win-x64 是需要打包生成的的平台文件，可以一次性打包其他平台的，用 , 隔开，比如win-x86

--mirror https://npm.taobao.org/mirrors/nwjs/ . 是下载nwjs的镜像地址

window是应用窗口的一些配置

打包的时候直接运行 npm run dist 开始打包，就会生成所有文件了，运行结果如下，其实就是自动下载NWjs，然后把源文件copy到dist下

PS E:\Code\NW_Learn\01_HelloWorld> npm run dist

> helloworld@0.1. dist E:\Code\NW_Learn\01_HelloWorld

> build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .

Starting building tasks... { tasks: [ [ 'win', 'x64' ] ], concurrent: false }

Building for win, x64 starts...

Fetching NW.js binary... { platform: 'win',

  arch: 'x64',

  version: '0.41.2',

  flavor: 'normal' }

[==================================================] .55KB/s .0s

Building targets...

Building directory target starts...

Building directory target ends within .59s.

Building for win, x64 ends within .89s.

PS E:\Code\NW_Learn\01_HelloWorld>

然后在当前目录下生成 dist/helloworld-0.1.0-win-x64目录

点击helloworld.exe就可以执行了，查看其详细信息，就是配置的那些

5、遇见的坑

5.1 不要使用 cnpm 安装nwjs-builder-phoenix，我的好像莫名的多下了一些依赖文件，然后打包的时候发生了莫名的化学反应，导致node_modules变成了1.3G，还自动把 node_modules 复制到 dist 下去了，然后打包出来的是个巨大的废包，还是手动 npm config set registry https://registry.npm.taobao.org 设一下镜像吧

5.2 千万不要把这句话抄过来，否则生成好几个平台的目录可慢了

"dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",

5.3 这个生成压缩文件的也还是不要选了

"targets": [

      "zip",

      "nsis7z"

 ]

5.4 可能是由于 5.1 的原因，我打包一直生成一对废品，后来删了 node_modules重新用npm安装，再打包就好了

6、一些说明

就一个helloworld，打包后的文件夹有211M，压缩后63M，是因为这东西就是个Chrome浏览器

不推荐将整个应用打包为一个exe文件，虽然看起来逼格高一点，但是不好更新

7、Electron

又试了试electron，文档确实比NWjs齐全很多，起手也非常简单

7.1、开始构建

GitHub提供了简单的 QUICK-START 项目，首先从 https://github.com/electron/electron-quick-start 把代码下下来

然后在目录下 npm install 安装依赖

然后 npm start 启动就可以了

这个不会中文乱码，不需要改GBK

7.2、打包

参照 Electron桌面应用打包流程和官网打包教程

7.3、补充说明

GitHub上Electron主要有三个部分

electron: 项目源码

electron-quick-start: 快速构建示例

electron-api-demos：api演示程序，配合上quick-start用来试验非常友好，要注意的一点是这个项目下下来后 npm install 可能会卡在下载依赖的地方不动了，因为他自己依赖了 electron-download 模块，该模块会自己从GitHub上去下载electron的源码，而不是用npm，所以要是卡住了可以直接ctrl+c终止，然后手动 npm install electron就可以了，或者直接用cnpm install也可以一次性通过，不过不建议这么做（打包可能出问题）。

NW.js桌面应用开发（一）的更多相关文章

nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
中文代码示例之NW.js桌面应用开发初体验
先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...
nw.js桌面程序自动更新（node.js表白记）
Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...
NW.js 桌面应用程序
nw.js官网 https://nwjs.io/downloads/ 中文网:https://nwjs.org.cn/ 参考文档 https://www.cnblogs.com/xuanhun/ ...
关于Nodejs开发桌面应用。NW.js 和 Electron 优缺点分析对比
从开发角度来说,选择用 nw.js 还是 election ,区别其实不是很大.大部分工作还是在自己的 javascript 和 HTML 上.国内比较有名的,比如微信web开发工具.钉钉都是基于 n ...
nw.js开发第一个程序（html开发桌面程序exe）
一.环境配置 windows系统 cnpm install node 下载nw.js https://github.com/nwjs/nw.js 找到download下载合适的版本二.开发项目目录 ...
用Node开发桌面应用：NW.js和Electron
NW.js和Electron对比:[http://tangiblejs.com/posts/nw-js-electron-compared] NW.js:[https://nwjs.io/] Elec ...
使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
用node-webkit(NW.js)创建桌面程序
以往写windows桌面程序需要用MFC.C#之类的技术,那么如果你只会web开发技术呢?或者说你有一个网站,但是你想把你的网站打包成一个桌面应用程序,该如何做呢? 答案就是用node-webkit这 ...

随机推荐

【python基础语法】第4天作业练习题
""" 有6道题(通过字典来操作): 1. 某比赛需要获取你的个人信息,设计一个程序, 运行时分别提醒输入姓名.性别.年龄 ,输入完了,请将数据存储为一个字典, 2.数 ...
吴裕雄--天生自然HADOOP操作实验学习笔记：mapreduce代码编程
实验目的深入了解mapreduce的底层了解IDEA的使用学会通过本地和集群环境提交程序实验原理 1.回忆mapreduce模型前面进行了很多基础工作,本次实验是使用mapreduce的AP ...
webserver代理生成本地类的两种方式
方式1,把webservers地址请求出来的xml拷贝出来放到文本里面后缀改成wsdl文件在VS里面使用下列命令 C:\Program Files (x86)\Microsoft SDKs\Windo ...
ES6 DEMO
案例: ①匿名封装 (function(window,document){ const HEAD = 1; let MSG = function(options){ this._init(option ...
@RequestBody 和 @RequestParam(“test”) 的区别与联系
@RequestBody @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的):GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用 ...
C#中System.ServiceProgress报错
场景在C#中检索本地计算机所有服务时,使用 System.ServiceProcess.ServiceController[] services = System.ServiceProcess.Se ...
Project Euler 133: Repunit nonfactors
题意英文做法结论1:\(R(a)|R(am)(a,m\ge 1)\) \[\frac{R(am)}{R(a)}=\frac{\frac{10^{am}-1}{9}}{R(a)}=\frac{\f ...
安装Logstash到linux（源码）
运行环境系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:logstash-7.1.0 硬件要求:最低2核4GB 安装过程 1.源码安装JDK 1.1.从 ...
MySql 小表驱动大表
在了解之前要先了解对应语法 in 与 exist. IN: select * from A where A.id in (select B.id from B) in后的括号的表达式结果要求之输出一列 ...
c# 调用c++类库控制usb继电器
网上找不到调用此类库的文章,简单写一下,以备后用. 下面是封装后的调用c++类库的类 public class UsbRelayDeviceHelper { /// <summary> / ...

NW.js桌面应用开发（一）