zqy233的前端学习笔记开始
下载模板
sh
yarn create electron-app my-app
yarn create electron-app my-app
运行项目
sh
yarn start
yarn start
主进程中配置
js
const createWindow = () => {
// Create the browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 是否可使用node混合(浏览器中调用node方法)，默认是false
nodeIntegration: true,
// 只能在预加载脚本中使用node，而页面中不行，这样是为了安全
contextIsolation: false,
// 允许使用webview
webviewTag: true
}
})
const createWindow = () => {
// Create the browser window
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 是否可使用node混合(浏览器中调用node方法)，默认是false
nodeIntegration: true,
// 只能在预加载脚本中使用node，而页面中不行，这样是为了安全
contextIsolation: false,
// 允许使用webview
webviewTag: true
}
})
入门示例
拖拽文件，获取文件信息，浏览器中调用node方法读取文件内容
index.html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h2 id="holder">拖入此上传文件内容</h2>
<div>
<h1>
读取的文件内容
<span id="readList"></span>
</h1>
</div>
</body>
<script src="./render.js"></script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h2 id="holder">拖入此上传文件内容</h2>
<div>
<h1>
读取的文件内容
<span id="readList"></span>
</h1>
</div>
</body>
<script src="./render.js"></script>
</html>
render.js
js
let holder = document.querySelector("#holder")
let readlist = document.querySelector("#readList")
let fs = require("fs")
holder.addEventListener("drop", e => {
e.preventDefault()
e.stopPropagation()
console.log(e)
for (const file of e.dataTransfer.files) {
console.log(file)
fs.readFile(file.path, (err, data) => {
if (err) return console.log(err)
readlist.innerHTML = file.name + "/" + data
})
}
})
holder.addEventListener("dragover", e => {
e.preventDefault()
e.stopPropagation()
})
let holder = document.querySelector("#holder")
let readlist = document.querySelector("#readList")
let fs = require("fs")
holder.addEventListener("drop", e => {
e.preventDefault()
e.stopPropagation()
console.log(e)
for (const file of e.dataTransfer.files) {
console.log(file)
fs.readFile(file.path, (err, data) => {
if (err) return console.log(err)
readlist.innerHTML = file.name + "/" + data
})
}
})
holder.addEventListener("dragover", e => {
e.preventDefault()
e.stopPropagation()
})
Electron是什么
一款跨平台的桌面应用，兼容Windows、Mac、Linux系统 可以理解为一个包了浏览器的壳，提供了浏览器+Node.js+框架API的运行环境，可以打开多个静态html脚本（或vue项目）
分为主进程和渲染进程
主进程是程序入口，提供了Node.js和Native API（框架）环境； 渲染进程提供了浏览器环境，负责加载页面，完成业务逻辑，可以在主进程同时打开多个渲染进程
关于浏览器内核，可以在【主进程】中查看浏览器内核版本
sh
process.versions.chrome
process.versions.chrome
主进程与渲染进程（窗口）之间如何通信
渲染进程之间，需要通过主进程转发通知
是否可以使用vuex
因为不同的窗口，属于不同的渲染进程， vuex 是被隔离的，相互之间是不能通过 vuex 进行通信的，2个渲染进程之间进行通信，需要通过 主进程进行分发才行。 可以用 vuex - electron 来实现
vuex-electron
通过拦截所有渲染进程（窗口）内状态机实例的action、mutation提交，把数据同步到主进程进行管理，这里注意，所有的action、mutation方法块内的执行环境，都是主进程，不建议在状态机API进行渲染进程（窗口）间的直接通信和交互操作。