前言
项目 创建 electron 项目，参考官网的文档来，我也只是入门 哈哈哈
官网
https://electronjs.p2hp.com/docs/latest/tutorial/tutorial-first-app
1. 创建一个文件夹
electron-app
然后 cd electron-app 这个目录下
npm init
然后加上
"start": "electron .",
这句命令
2. 然后安装
npm install electron --save-dev
然后 发现安装不了 那么就是要用到 淘宝镜像了
搜索解决方案如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install electron --save-dev
使用cnpm 就可以安装了
得到了这目录就OK了
3. 创建文件
main.js
// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
// const { app, BrowserWindow } = require('electron')
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path')
const createWindow = () => {
// 创建浏览窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
</body>
<!-- <script src="./renderer.js"></script> -->
</html>
然后是新版的
preload .js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
然后就可以再 运行
npm start
就可以看到这个界面了
OK 后续 Keeping
标签：const,项目,创建,app,electron,js,BrowserWindow,Electron From： https://www.cnblogs.com/yf-html/p/17972960