electron Helloworld
原创
©著作权归作者所有:来自51CTO博客作者ives404的原创作品,请联系作者获取转载授权,否则将追究法律责任
本文使用纯手工方式创建
设置镜像
npm config edit
在弹出的文档最后添加
electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
- yarn init
- yarn add --dev electron
这一步需要保证github正常访问或者使用其他镜像 - 配置启动命令
//package.json
{
"scripts": {
"start": "electron ."
}
}
package.json中调整入口文件为main.js
- 创建示例代码
依次创建下列文件
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</p>
<script src="./preload.js"></script>
</body>
</html>
preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
- 运行
yarn start
效果如下
debian arm64打包 树莓派系统
使用docker打包
拉取镜像
docker pull node:latest
运行node环境
docker run --name test -td docker.io/node
复制测试代码文件到node容器中
docker cp electrontest.zip 55ebb7b1f64f:/
进入node容器
docker exec -it 5faa0385f2e7 /bin/bash
调整package.json
{
"name": "TestApp",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^19.0.7",
"electron-builder": "^23.1.0"
},
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"distDeb": "electron-builder --linux "
},
"homepage": "XXXXXX",
"email": "project@hostname.com",
"build": {
"productName": "APP",
"appId": "com.test.app",
"electronVersion": "19.0.7",
"copyright": "版权所有信息",
"asar": false,
"directories": {
"output": "dist"
},
"publish": [
{
"provider": "generic",
"url": "发布仓库地址"
}
],
"linux": {
"target": [
{
"target": "deb",
"arch": [
"arm64"
]
}
],
"maintainer": "主要贡献者",
"description": "基于4.1.4配置"
}
},
"dependencies": {
"electron-packager": "^15.5.1"
}
}
[参考]
快速入门
留待后查,同时方便他人