Electron 入门案例1

最新推荐文章于 2024-12-09 22:04:27 发布

转载最新推荐文章于 2024-12-09 22:04:27 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yshyee/p/6672909.html

文章标签：

#json

本文详细介绍了使用Electron创建桌面应用程序的过程。从初始化项目到配置package.json，再到编写app.js和app.html，最后运行应用程序。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：package.json

通过npm init生成package.json文件，内容如下：

{
  "name": "t02",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "~1.6.2"
  },
  "devDependencies": {
    "electron": "~1.6.2"
  },
  "author": "",
  "license": "ISC"
}

2：app.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 300
    });

    mainWindow.loadURL('file://' + __dirname + '/app.html');

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

3:app.html

<!doctype html>
<html>
<head>
<title>My First Electron App</title>
<style type="text/css">
body {
    margin: 0;
}

textarea {
    width: 100%;
    border: none;
    background: #eee;
    margin: 10px 0;
    padding: 0;
    outline: none;
}
</style>
</head>
<body>
<textarea rows="10"></textarea>
</body>
</html>