Electron初步学习笔记

这几天有点时间,学习了解了一下被称为Electron框架,简单地说,基于Nodejs和谷歌浏览器,可以方便的实现一次写代码,生成多个平台的应用程序。貌似很强大,其实就是网页来实现GUI,性能是不行的,但是架不住这个多平台的优势,学习了解一下。

题外话:这几年JAVA被糟蹋的不行了,估计再过几年只能在历史书里看到了,悲哀。

1,环境准备

官方网站 : https://electronjs.org/
        从上述网站获取最新版本信息,基本上就需要Nodejs,为了获取代码方便需要GIT,然后是开发工具,比如MSVC.
以Windows为例
1)Git-2.17.1.2-64-bit
2)node-v8.9.3-x64
3)VSCodeSetup-x64-1.24.1
上述安装完毕,准备结束

2,第一本程序
代码网站 :https://github.com/electron/electron-quick-start
任意目录下,执行下列命令
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
顺利的话,应该就能看到Electron程序跑起来了
同理 https://github.com/electron/electron-api-demos
这个有基本的API介绍,以后可以参照这个里面的例子实现各个具体机能

3,使用打包工具(electron-packager)打包成可执行程序

首先全局安装打包工具

npm install electron-packager -g    

命令介绍
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
比如
electron-packager C:\NodeWorkspace\electron-quick-start –platform=win32 –arch=x64 myapp-built
执行之后,一切顺利的话,应该在目录 C:\NodeWorkspace\myapp-built-win32-x64 下,生成了Win32 64位环境下的程序了
可以跑跑看看。

4,生成安装程序(electron-winstaller)
官方网站 : https://github.com/electron/windows-installer

1)安装 electron-winstaller 

npm install electron-winstaller

在你要打包的目录所在的上级目录,安装这个东西,
假设我们的工程在
C:\NodeWorkspace\electron-api-demos
我们需要在
C:\NodeWorkspace\下面安装
上述操作非必要,只是为了便于理解(个人认为)

2)安装electron-squirrel-startup
我们需要在 C:\NodeWorkspace\electron-api-demos 下面安装
npm install electron-squirrel-startup
站点 https://github.com/mongodb-js/electron-squirrel-startup
可以支持Windows环境下,执行追加参数/卸载等等的处理,这里暂略
我们只加一行 
if(require(‘electron-squirrel-startup’)) return;

3)生成前的调整与准备
a.因为window环境不能有-,所以我们需要把Package.json下面的name属性修改一下
不是改我们的工程文件,而是改 C:\NodeWorkspace\myapp-built-win32-x64\resources\app 下的
“name”: “electron-quick-start”,修改为
“name”: “electron_quick_start”,
b.为了方便理解,在workspace下面建一个install目录
比如 C:\NodeWorkspace\myapp-built-win32-x64-installer
c.在C:\NodeWorkspace\下建一个build.js (其实名字无所谓)
编辑如下内容

var electronInstaller = require('electron-winstaller');
resultPromise = electronInstaller.createWindowsInstaller({
    appDirectory: 'C:\\NodeWorkspace\\myapp-built-win32-x64',
    outputDirectory: 'C:\\NodeWorkspace\\myapp-built-win32-x64-installer',
    authors: 'My App Inc.',
    exe: 'myapp-built.exe'
  });
resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));<span style="font-size:13.2px;"></span>

两个目录和EXE名称务必和证实位置一致
d.执行这个js
应该在输出目录有安装文件了
备注,如果返回错误2148734720,尝试安装.netframework 4.5.2

另一个制作安装包的方法(electron-installer-windows)
官方网站 : https://github.com/unindented/electron-installer-windows
1)通过npm安装
npm install -g electron-installer-windows
2)直接执行
electron-installer-windows –src C:\NodeWorkspace\myapp-built-win32-x64 –dest C:\NodeWorkspace\myapp-built-win32-x64-installer
如果出问题,尝试安装.netframework 4.6

基本过程就是这样,接下来就是尝试基本控件以及各种框架结合的用法了。