electron Helloworld

本文使用纯手工方式、docker创建两种方式

设置镜像
npm config edit

如果不能使用此命令可以直接使用npm config set设置

npm config set registry http://registry.npm.taobao.org/

在弹出的文档最后添加

electron_mirror=https://npm.taobao.org/mirrors/electron/
 
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

  1. yarn init

  2. yarn add --dev electron
    这一步需要保证github正常访问或者使用其他镜像

  3. 配置启动命令

//package.json
{
  "scripts": {
    "start": "electron ."
  }
}

package.json中调整入口文件为main.js

  1. 创建示例代码

依次创建下列文件
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])
  }
})
  1. 运行
    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"
    }
}

[参考]
快速入门

posted @ 2022-07-03 00:02  Hey,Coder!  阅读(146)  评论(0)  编辑  收藏  举报