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}`));

两个目录和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~~

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

作者

归档

分类