electron的安装与应用
Posted yloved
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了electron的安装与应用相关的知识，希望对你有一定的参考价值。
electron的安装与应用
官方文档
https://www.electronjs.org/docs
npm安装electron,为了快速安装，使用淘宝源镜像
npm init
npm install electron --save-dev --registry=https://registry.npm.taobao.org
安装过程中可能会出现
Downloading electron-v9.0.5-win32-x64.zip: [----------------------------------------------------------------------------------] 0% ETA: 0.0 seconds一直是0% 的问题，解决问题参考文档：[https://blog.csdn.net/dling8/article/details/105434000](https://blog.csdn.net/dling8/article/details/105434000 """)
解决方式：
1.修改npm配置
npm config edit
2.在打开的文件中增加下面一行配置，然后保存关闭
electron_mirror=https://npm.taobao.org/mirrors/electron/
3.重新安装
npm install electron --save-dev --registry=https://registry.npm.taobao.org
检查是否安装成功
方式1：
执行 npx electron -v 可以打印出版本号
方式二：.
ode_modules.binelectron 可以弹出一个界面
执行
安装完成后，写一个hello world案例
- 在根目录下创建
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world!
</body>
</html>
- 在根目录下创建
main.js文件，文件名称可以任意，一般使用main.js和index.html
const { app, BrowserWindow } = require(‘electron‘)
let win=null
app.whenReady().then(r => {
// 创建浏览器窗口
win = new BrowserWindow({
width: 800,
height: 600
})
// 并且为你的应用加载index.html
win.loadFile("index.html")
win.on("close",()=>{
win=null
})
})
- 如果js文件名称是main.js,那么需要在
package.json中修改
# 默认是 "main": "index.js"
修改为："main": "main.js"
启动hello world程序
- 通过electron命令启动
.
ode_modules.binelectron .
或者
electron .
- 将electron命令，封装成npm脚本启动
在package.json文件的"scripts"字段添加start字段：
"scripts": {
"start": "electron ."
}
然后运行 npm start 即可启动
打包生成 .exe执行文件
参考文档资料：https://www.cnblogs.com/luzhanshi/p/11045096.html
1. 全局安装 electron-packager
npm install electron-packager -g --registry=https://registry.npm.taobao.org
2. 在package.json中编写执行脚本
"scripts": {
"package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules"
},
各个参数介绍：
HelloWorld ：你将要生成的exe文件的名称
--platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mas, win32
--arch=x64：决定了使用 x86 还是 x64 还是两个架构都用
--icon=computer.ico：自定义设置应用图标
--out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹
--asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在，否则会以文件夹形式存在
--app-version=0.0.1：生成应用的版本号
--overwrite：覆盖原有的build,让新生成的包覆盖原来的包
--ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
--electron-version 5.0.0：指定当前要构建的electron的版本,需要和当前的版本一致,具体可以在package.json文件中查看,可以不加
3. npm run package 打包
electron的一些应用
1. 渲染进程中的一些应用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">获取文件信息</button>
<div id="div1"></div>
<button id="btn2">打开新窗口</button>
<script src="render/index.js"></script>
<a id="a1" href="https://www.baidu.com">我是一个链接</a>
<button id="btn3">打开图片</button>
<img id="img1" src="">
<button id="btn4">打开消息对话框</button>
<button id="btn5">底部弹出消息</button>
<div>
激活码：<span id="span1">fafafafafafd</span>
<button id="btn6">复制激活码</button>
</div>
<script>
/*electron 复制文本到剪切板*/
let {clipboard} = require("electron")
let span1 = document.getElementById("span1")
let btn6 = document.getElementById("btn6")
btn6.onclick = () => {
clipboard.writeText(span1.innerHTML)
alert("复制成功")
}
/*electron底部弹出消息*/
let msg = {
title: "这是消息头",
body: "这是消息主体"
}
new window.Notification(msg.title, msg)
/*electron使用消息对话框*/
let btn4 = document.getElementById("btn4")
btn4.onclick = () => {
dialog.showMessageBox({
type: "info",
title: "消息对话框",
message: "是不是要去",
//点击按钮时，会返回按钮在数组中的索引，从0开始
buttons: ["去", "不去了"]
}).then(res => {
console.log(res)
})
}
/*electron中选择文件对话框的使用*/
let {dialog} = require("electron").remote
let btn3 = document.getElementById("btn3")
btn3.onclick = () => {
dialog.showOpenDialog({
title: "请选择你喜欢的图片",
//可以设置默认打开的路径
//defaultPath:""
//可以设置显示的文件格式
filters: [{name: "", extensions: ["jpg"]}],
//可以设置按钮的文本
//buttonLabel:"打开图片"
}).then(res => {
console.log(res)
let img1 = document.getElementById("img1")
img1.setAttribute("src", res.filePaths[0])
}).catch(err => {
console.log(err)
})
}
/*默认的a标签是在当前桌面窗口中直接打开，我们设置成在外部的浏览器中打开，使用shell*/
let shell = require("electron").shell
let a1 = document.getElementById("a1")
a1.onclick = function (e) {
//先清除默认
e.preventDefault()
//获取href链接
let href = this.getAttribute("href");
//通过shell打开
shell.openExternal(href)
}
/*在渲染进程中实现鼠标右键菜单功能，要使用remote*/
document.oncontextmenu = (e) => {
e.preventDefault()
let template = [
{
label: "粘贴"
},
{
label: "复制"
}
]
let remote = require("electron").remote
remote.Menu.buildFromTemplate(template).popup({window: remote.getCurrentWindow()})
}
/*在渲染进程中通过remote使用只有主进程才能使用的electron功能,打开新窗口
* 除了此方式之外，还可以使用window.open()打开子窗口，不过子窗口会随着父窗口的关闭而关闭
*
* */
let btn2 = document.getElementById("btn2")
let BrowserWindow = require("electron").remote.BrowserWindow
btn2.onclick = () => {
let newWin = new BrowserWindow({width: 800, height: 800})
newWin.loadURL("https://www.baidu.com")
newWin.on("close", () => {
newWin = null
})
}
/*在electron中使用node的原生api读取文件信息*/
let fs = require(‘fs‘)
let btn = document.getElementById("btn")
let div1 = document.querySelector("#div1")
div1.innerHTML = "未点击"
btn.onclick = () => {
console.log("点击了按钮")
fs.readFile("./fileTest.txt", ((err, data) => {
div1.innerHTML = data
}))
}
</script>
</body>
</html>
2. 主进程的一些应用
main.js
const {app, BrowserWindow} = require(‘electron‘)
let win = null
app.whenReady().then(r => {
win = new BrowserWindow({
width: 800,
height: 600,
//在渲染进程中使用require("fs")时，需要添加这一行，否则会报错 require is not defined
webPreferences: {nodeIntegration: true},
})
//在主进程中使用菜单功能的js
require("./main/menu.js")
win.loadFile("index.html")
// 打开开发者工具
win.webContents.openDevTools()
win.on("close", () => {
win = null
})
})
menu.js
//electron主进程中菜单的创建和使用
let {Menu, BrowserWindow} = require("electron")
function a() {
let win = new BrowserWindow({
width: 500, height: 500
})
win.loadURL("https://www.baidu.com")
win.on("closed", () => {
win = null
})
}
let template = [
{
label: "语言",
submenu: [{
label: "java",
//可以设置子菜单的快捷键
accelerator: "ctrl + n",
//每个子菜单都可以绑定监听事件
click: a
}, {
label: "python"
}
]
},
{
label: "平台",
submenu: [{
label: "浏览器",
}, {
label: "桌面",
}
]
}]
Menu.setApplicationMenu(Menu.buildFromTemplate(template))
以上是关于electron的安装与应用的主要内容，如果未能解决你的问题，请参考以下文章