electron桌面应用的基本使用

榕树下的蜗牛
251 阅读6分钟

electron介绍

简介

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。简单说，electron 是一个可以让我们使用js创建桌面应用程序的框架，并且可以很简单的实现跨平台，让我们可以更轻松的书写业务逻辑，而不用担心跨平台的问题

用处

Electron 可以让我们使用纯 JavaScript 调用丰富的原生(操作系统) API 来创造桌面应用。除了常规的 HTML5 接口，这些应用能够使用所有的 Node.js 模块，以及 Electron 特有的模块

安装

#如果没有安装全局要先安装全局
cnpm install -g electron
#项目安装
npm install electron --save-dev
const { app,BrowserWindow } = require('electron'）
                                      
                                      
打开命令: electron main.js

主进程和渲染进程

  • 主进程：在Electron中运行package.json和main脚本的进程称为主进程。例如，main.js文件属于主进程，同时在main.js文件中直接引入的js文件也属于主进程(如：require('./mainProcess/menu.js'))
  • 渲染进程：electron使用Chromium的多进程机制来渲染页面，每个页面拥有一个自己的进程，该进程称为渲染进程。如main.js文件中加载了index.html文件，在index.html文件中引入的index.js就属于渲染进程
  • 主进程和渲染进行之间通信的常见方式：(注意,这些方法全部需要在主进程已经创建了BrowserWindow之后才有效)
    • ipcRenderer用于渲染进程
      • ipcRenderer.on(channel, listener) --> channel为事件频道,字符串.listener为触发回调函数,用于响应webContent.send()
      • ipcRenderer.send(channel, data) --> 概念同上,用于向ipcMain发送异步信息
    • ipcMain用于主进程,响应从渲染进程中发送的消息
      • ipcMain.on(channel,listener) --> 响应从ipcRender中相同channel
    • event.sender：主进程监听到渲染进程发送的消息，在响应事件回调函数中使用event.sender.send()方法可以向渲染进程发送消息
    • webContent：ipcMain本身是无法直接发送事件的,只能通过响应事件回调的event来发送,那如果我们想先让主进程发送消息就可以使用webcontent.这个webcontent是在BrowserWIndow实例中的方法
      • webContent.send(channel,data) --> 主进程向渲染进程发送消息
  • 不同渲染进程之间共享数据
    • 我们可以简单的使用HTML5中提供的API来实现，如localStorage和sessionStorage
    • 在electron中，我们可以在主进程中将一个对象存储为全局变量，在渲染进程中通过remote模块进行操作

进程间的通信

主进程

const {app,ipcMain} = require('electron')

#主进程发送

app.on('ready',()=> {
  hm_createWindow()
})
let win;
function hm_createWindow(){
    win = new BrowserWindow({})
    win.webContents.on('did-finish-load',()=>{
        //通过win.webContents发送
    	win.webContents.send('事件名称',数据)
    })
}

#主进程接收

ipcMain.on('事件名称',(event,data)=>{
    console.log(data)
    //通过event来向渲染进程发送信息，从哪里发过来就回到哪儿去
    event.sender.seng('事件名称',数据)
})

#共享数据
global.shardData = {
    name:'上海'
}

渲染进程

const {ipcRenderer} = require('electron')
#渲染进程发送
ipcRenderer.send('事件名称',数据)
#渲染进程接收
//渲染进程监听主进程发送的消息
ipcRenderer.on('事件名称',(event,data)=>{
    console.log(data)
})

#共享数据
const remote = require('electron').remote
remote.getGlobal('shardData')

//渲染进程调用主进程的方法，BrowserWindow就可以在渲染进程里使用了
const {BrowserWindow} = require('electron').remote




#在渲染进程js文件中使用require引入模块需要设置属性webPreferences.nodeIntegration为 true
let win = new BrowserWindow({
    webPreferences: {
       nodeIntegration: true
    }
})

Main Process 模块

主进程

app(主应用)

控制你的应用程序的事件生命周期。

主进程

实例方法

app.quit() //

ready事件

当 Electron 完成初始化时被触发

BrowserWindow(窗口)

创建和控制浏览器窗口。

主进程

实例参数

new BrowserWindow([options])

width: Integer (可选) - 窗口的宽度，单位为像素。默认为800.
height: Integer(可选) - 窗口的高度，单位为像素。默认为600

实例事件

close //在窗口要关闭的时候触发
ready-to-show //准备显示的时候触发

静态方法

实例属性

win.webContents.openDevTools([options]) //打开开发者工具
contents.closeDevTools() //关闭开发者工具

实例方法

win.loadURL(url[, options]) //加载html
//win.loadURL(path.join(__dirname,'views/index.html'))

menu(菜单)

创建原生应用菜单和上下文菜单。

主进程

静态方法

Menu.setApplicationMenu(menu)

实例方法

menu.buildFromTemplate(template) //返回Menu
  template选项：
    label
    role
    click
    accelerator //快捷键

dialog(对话框)

显示用于打开和保存文件、警报等的本机系统对话框

实例方法

dialog.showMessageBox()  //异步提示框
dialog.showMessageBoxSync() //同步提示框

ipcMain

从主进程到渲染进程的异步通信

实例方法

ipcMain.on() //响应从ipcRenderer中相同channel

webContents

渲染以及控制 web 页面

实例事件

did-finish-load //导航完成时触发，即选项卡的旋转器将停止旋转，并指派onload事件后

实例方法

contents.send(channel, ...args) //主进程向渲染进程发送异步消息

Tray(系统托盘)

添加图标和上下文菜单到系统通知区

new Tray(image) //创建与image关联的新任务栏图标。

实例方法

tray.setToolTip(toolTip) //设置鼠标指针在托盘图标上悬停时显示的文本

tray.setContextMenu(menu) //设置这个图标的内容菜单

Renderer Process 模块

渲染进程

ipcRenderer

从渲染器进程到主进程的异步通信。

实例方法

ipcRenderer.on(channel, listener) //监听 channel, 当新消息到达，将通过 listener(event, args...) 调用 listener


ipcRenderer.send(channel, ...args) //通过channel向渲染器进程发送异步消息，可以发送任意参数
//channel 事件名称
//args 数据

remote

在渲染进程中使用主进程模块。

const { BrowserWindow } = require('electron').remote

应用程序打包

打包为可执行文件

安装打包工具

cnpm i --save-dev electron-packager

命令使用

electron-packager <应用目录> <应用名称> <打包平台> --out=<输出目录> <架构> <应用版本> <忽略文件><图标> --overwrite

配置说明

win: 打包平台：--platform=win32  | 架构：--arch=x64  | 图标：--icon=**.ico
mac:打包平台：--platform=darwin| 架构：--arch=x64 | 图标：--icon=**.cins

配置package.json命令打包

"packagewin": "electron-packager ./ heima --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --icon=./images/icon.ico --overwrite",

打包为安装包

安装打包工具

cnpm i electron-builder -g
//electron-builder可以将应用程序打包为安装文件，如.exe .dmg,对于windows系统打包为.exe,对于mac系统打包为.dmg

实现electron-builder的配置

 "build": {
    "appId": "com.itcast-wu.app",
    "directories": {
      "app": "./"
    },
    "productName": "广州-计算器",
    "dmg": {
      "icon":"./images/mac.icns",
      "window": {
        "x": "200",
        "y": "150",
        "width": 500,
        "height": 400
      }
    }，
    "mac": {"icon":"./images/mac.icns"},
    "win": {"icon":"./images/icon.ico"}
  }

添加script脚本配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "packagewin": "electron-packager ./ heima --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --icon=./images/icon.ico --overwrite",
    "buildmac": "electron-builder --platform=mac --arch=x64",
    "buildwin": "electron-builder --platform=win --arch=x64"
  }
avatar
文章
阅读
粉丝