electron 简单 demo 并打包 linux

main.js

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

function createWindow () {
    // 创建浏览器窗口
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 加载index.html文件
    win.loadFile('index.html')
}

app.whenReady().then(createWindow)

 

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>document.write(process.versions.node)</script>
,
Chrome
<script>document.write(process.versions.chrome)</script>
,
and Electron
<script>document.write(process.versions.electron)</script>
.
and Electron
<button onclick="log()">click</button>
<img src="./assets/111.png" alt="">
<script>
    function log() {
        alert(1);
    }

    window.onload = () => {
        document.addEventListener('keydown', function (e) {
            if (e.keyCode == 86 && e.ctrlKey) {
                alert("你按下了ctrl+V");
            }
        });
    }
</script>
</body>
</html>

 

package.json

{
  "name": "electron-quick-start",
  "description": "A minimal Electron application",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . demo --platform=linux --arch=x64 --out=./dist --asar --app-version=1.0.0 --electron-version=18.2.2 --overwrite -no-sandbox --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/",
    "package2": "electron-packager . demo --platform=linux --arch=ia32 --out=./dist --asar --app-version=1.0.0 --electron-version=18.2.2 --overwrite -no-sandbox --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/",
    "package3": "electron-packager ./  helloworld --platform=linux --arch=x64 --out=./app  --app-version=1.0.0 --electron-version=1.6.11  --overwrite --icon=./myicon.ico"
  },
  "license": "CC0-1.0",
  "dependencies": {
    "electron": "^18.2.2",
    "electron-packager": "^15.5.1"
  },
  "devDependencies": {
    "electron": "^18.2.2"
  }
}

 

npm install 安装依赖后，npm start 可查看启动效果

 

文件结构记录：

 

posted @ 2022-05-12 15:13  名字不好起啊  阅读(950)  评论(0)    收藏  举报