目录
一,Electron 简单了解
Electron
是一个跨平台的桌面应用开发框架,用html
css
js
的技术开发桌面上面可以安装的
软件。
Electron
又为前端开发者谋得了一份好的差事”。
想起在网路里流传很广的一句话“不要和老夫说什么C++
,Java
,老夫行走江湖就靠一把JS
,遇到需求撸起袖子就是干”。Electron
由Github
开发Electron
是一个用HTML
,CSS
和JavaScript
来构建跨平台桌面应用程序的一个开源库Electron
通过将Chromium
和Node.js
合并到同一个运行时环境中,并
将其打包为Mac
,Windows
和Linux
系统下的应用来实现这一目的。Electron
最新版本为4.0.4
当前时间为(2019-02-08
)
1.1、学前准备
环境安装
- 电脑需要安装
Node.JS
,点击node中文网
选择对应的版本node.js
安装:
npm
使用国内淘宝镜像安装方法(单次有效):
如果想替换全局的npm install [模块名] --registry=https://registry.npm.taobao.org
npm
安装源,执行下边命令设置配置文件:
更换仓库地址:npm config set registry https://registry.npm.taobao.org
查看npm config set prefix 'C:\Program Files\nodejs\global_node_modules'
npm
配置信息;npm config list
- 电脑需要安装Git :
Git
官网 下载对应版本安装,或者去各大软件平台搜索安装 - 需要有
HTML
CSS
javascript
以及node.js
基础; - 安装 Electron
命令行执行以下命令 全局 安装:npm install -g electron
-g
表示全局安装
5.开发工具 Visual Studio Code
建议下载对应版本的Visual Studio Code
进行开发,个人觉得比较好用
1.2、克隆一个仓库,快速启动一个项目
# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start
体验一下 electron
1.3、手动搭建一个 electron 项目
方法一:从0开始手动编写
-
新建一个项目目录 例如:
electrondemo01
-
在
electrondemo01
目录下面新建三个文件:index.html
、main.js
、package.json
-
index.html
里面用css
进行布局(以前怎么写现在还是怎么写) -
在
main.js
中写如下代码:var electron =require('electron'); //electron 对象的引用 const app=electron.app; //BrowserWindow 类的引用 const BrowserWindow=electron.BrowserWindow; //创建全局mainWindow的引用 let mainWindow=null; //监听应用准备完成的事件 app.on('ready',function(){ //创建窗口 mainWindow=new BrowserWindow({width: 800, height: 600});//定义宽,高 mainWindow.loadFile('index.html');//加载页面index.html mainWindow.on('closed', function () { mainWindow = null; }) }) //监听所有窗口关闭的事件 app.on('window-all-closed', function () { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit(); } })
方法二:使用 electron-forge 搭建一个electron 项目
electron-forge
相当于 electron
的一个脚手架,可以让我们更方便的创建、运行、打包electron
项目。
#全局安装 electron-gorge
npm install -g electron-forge
# my-new-app 是指要生成的项目文件夹
electron-forge init my-new-app
#切换到 项目文件夹"my-new-app"
cd my-new-app
#启动项目
npm start
1.4、Electron 程序目录结构
Electron application 本质上是一个 Node. js
应用程序。 与 Node.js
模块相同,应用的入口是 package.json
文件。 一个最基本 的 Electron 应用一般来说会有如下的目录结构:
your-app/
├── package.json
├── main.js
└── index.html
-
为你的新Electron应用创建一个新的空文件夹。 打开你的命令行工具,然后从该文件夹运行
npm init
-
npm
会帮助你创建一个基本的package.json
文件。 其中的main
字段所表示的脚本为应用的启动脚本,它将会在主进程中执行。 如下片段是一个package.json
的示例:{ "name": "your-app", "version": "0.1.0", "main": "main.js" }
-
链接:
Electron文档
更多细节参考官方文档
二、正式搭建 Electron 项目步骤
经过以上的准备,就可以开始搭建
electron
的项目了,但是对于光有兴趣,又是零基础的新手(比如说我)来说,还是一头雾水.现在写一下我搭建项目的详细步骤.
-
首先新建项目文件夹,比如,我的项目名称为
electron_01
-
在项目文件夹下新建两个文件
index.html
和main.js
文件
说明:index.html
文件是程序的页面文件,就是你看到的
红框的部分,hello word是我自己写在index.heml
的
main.js
文件是程序的主入口文件 -
现在的目录结构是这样的
-
在项目文件夹下 右键 >在终端中打开执行
#运行之后会一步一步的问你,一步一步执行package.json npm init
这个命令运行之后会在项目文件夹下生成
package.json
文件
package.json
中的内容{ "name": "electron_01", "version": "1.0.0", "description": "my first electron app", "main": "mian.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "yumos", "license": "ISC" }
-
在项目文件夹下 右键 >在终端中打开 执行以下命令,将我们要用的
electron
包安装到项目文件夹下的node_modules
文件夹下,这样之后在写程序的时候会有语法提示方便我们继续学习npm install electron --save # 加--save 命令之后,会把依赖信息写入package.json文件中
现在
package.json
文件里边的内容是这样的{ "name": "electron_01", "version": "1.0.0", "description": "my first electron app", "main": "mian.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "yumos", "license": "ISC", "dependencies": { "electron": "^4.0.4" } }
"dependencies"
里的"electron": "^4.0.4"
就是我们安装的electron模块的信息,"dependencies"
下写的是我们的项目的依赖项的信息,node_modules
文件夹下是我们安装依赖模块的内容,每个项目仅仅有一个node_modules
文件夹. -
现在我们分别在
index.html
文件,main.js
文件中增加内容<!DOCTYPE html> <html> <head> <meta charset="utf-8"> //在 index.html 文件中添加对 main.js的引用 <script src="main.js"></script> </head> <body> //添加我们自己的文本内容,比如 hello world </body> </html>
//引入 electron 模块 var electron =require('electron'); //electron 对象的引用 const app=electron.app; //BrowserWindow 类的引用 const BrowserWindow=electron.BrowserWindow; //定义全局变量mainWindow let mainWindow=null; //监听应用准备完成的事件 app.on('ready',function(){ //创建窗口 宽:800,高:600 mainWindow=new BrowserWindow({width: 800, height: 600}); //加载 index.html 文件的引用 mainWindow.loadFile('index.html'); //关闭窗口 mainWindow.on('closed', function () { mainWindow = null; }) })
-
现在我们的项目目录结构是这样的:
当我们不小心删除node_modules
文件夹以后,只要有package.json
文件(其中的"dependencies"
中记录的依赖模块信息),在项目目录下打开命令窗口运行#该命令会根据 packagejson文件,下载所有的依赖模块 npm install
-
在项目目录右键>在终端中打开,运行以下命令启动我们的项目:
#注意是 electron + 空格 +点 electron .
启动以后是这样的
三、主进程和渲染进程之间的通信
3.1,模块简介
ipcMain
从主进程到渲染进程的异步通信(主进程
→ \rightarrow →渲染进程
)。- 发送消息时,事件名称为
channel
- 回复同步信息
event.returnValue = ···
- 回复异步消息,
event.sender.send(···)
- 发送消息时,事件名称为
ipcRenderer
- 从渲染器进程到主进程的异步通信(
渲染进程
→ \rightarrow →主进程
)。
3.1.1、流程示意
↑
\uparrow
↑ 这是一般流程(渲染进程A
→
\rightarrow
→主进程
→
\rightarrow
→渲染进程A
),当然,还可以渲染进程A
→
\rightarrow
→主进程
→
\rightarrow
→渲染进程B
或者主进程
→
\rightarrow
→渲染进程
3.1.2、ipcMain详解
个人理解:主进程就是指 main.js
运行的进程(运行程序后不能直接看到的进程,我们在主进程里通过BrowserWindow
打开的那个是渲染进程的页面),ipcMain
需要在主进程引入。
ipcMain包含的方法:
监听 channel,当接收到新的消息时 listener 会以 listener(event, args…) 的形式被调用。
- ipcMain.on(channel, listener)
channel
:Stringlistener
:Functionevent
:IpcMainEvent...args
:any[]
监听 channel,当接收到新的消息时 listener 会以 listener(event, args…) 的形式被调用。但是该方法只会调用一次,执行之后就会被移除。
- ipcMain.once(channel, listener)
channel
:Stringlistener
:Functionevent
:IpcMainEvent...args
:any[]
3.1.3、ipcRenderer详解
-
ipcMain.on(channel,listener)
channel
- Stringlistener
- Function- 监听 channel,当接收到新的消息时 调用listener
ipcMain.on(,listener){ }
3.2、完整例子
没写完,还在学习中 2020-07-26