vue基于electron构建第一个程序

时间:2023-02-03 千度麒麟人气:0

electron

electron的优点是跨平台，可以打包成windows，ios，Linux安装包。electron的市场前景有比较广，比如我们用的vscode编辑器，就是用electron+TypeScript开发的，还有微软，网易云音乐桌面应用程序，Facebook等等。electron在国外也十分的受欢迎。eletron也可以做定制开发，electron跨平台性能，兼容性好，生态也非常丰富。

electron只支持node16+版本

打开vscode，我们也可以用linux命令创建一个项目文件夹，也可以手动右键新建一个文件夹，命名为项目名称

mkdir electron

1.创建一个package.json文件

npm init -y

2.安装electon

npm install electron -D

3.在项目根目录创建一个main.js入口文件，并且在package.json文件，找到main，把默认的index.js也改成main.js

4.编写第一个electron程序

main.js：

const { app, BrowserWindow } = require('electron')
// 构建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width:800,
        height:600
    })
}
app.whenReady().then(createWindow)

5.在package.json中，找到script，添加：

"scripts": {
    "start": "electron ."
 },

6.运行electron

npm run start

此时，系统中打开的是原生窗口，如果我们想要在窗口中加载点东西，比如嵌套一个外部网页，我们可以在createWindow中加入

win.loadURL('https://www.baidu.com/')

这个时候我们保存，但是页面并没有渲染，我们还得重启项目才能生效，这样很麻烦，我们可以安装

npm install nodemon -g

在package.json中，找到script，修改：

"scripts": {
    "start": "nodemon --exec electron ."
 },

这个时候我们再运行electron，就实现嵌入外部页面了

npm run start

以后我们修改代码，再次运行，就能自动帮助我们重新启动进程了。

electron引用本地文件新建index.html

electron引用本地的文件，比如我们在根目录新建一个index.html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

在main.js中添加：win.loadFile('./index.html')

main.js：

const { app, BrowserWindow } = require('electron')
// 构建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width:800,
        height:600
    })
    // 加载本地文件
    win.loadFile('./index.html')
}
app.whenReady().then(createWindow)

这样我们就可以随心所欲地去开发我们的项目了，比如electron可以嵌套vue，react等等

electron还可以通过node访问本地硬件设备，比如文件操作，访问本地硬盘数据等等

什么是渲染进程(Render Process)：我们所能看得见被渲染出来的，就是渲染进程

什么是主进程(Main Process)：nodejs

如何在electron中打开类似于浏览器console的调试窗口？

在main.js中加入：win.webContents.openDevTools()

main.js

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

完整代码：

// 构建一个窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width:800,
        height:600
    })
    // 加载本地文件
    win.loadFile('./index.html')
    // 打开调试平台
    win.webContents.openDevTools()
}
app.whenReady().then(createWindow)

运行electron，这个时候我们会看到黄色的安全警告，处理方法：

方法1：在createWindow里添加

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

这种方法会屏蔽掉所有的警告，但是这种方法不推荐使用

方法2，配置CSP（Content-Security-Policy）：

在index.html中添加：

// 禁用外部资源图片 css js

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

// 禁用外部js

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

如果我们想要引入google-analytics 分析流量，我们可以这样写

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com">

这个时候，我们的控制台就变得干干净净了

加载全部内容