Electron 应用入门 (参考官方示例)

本文详细介绍如何使用Electron框架从零开始搭建一个桌面应用程序,包括下载官方示例项目、安装依赖、运行应用以及使用electron-packager进行多平台打包的过程。同时介绍了如何使用PagkagesNSIS工具进一步减小安装包体积。

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

Electron 应用

1.去官方下案例

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

2.安装electron-packager

npm install electron-packager --save-dev

package.json

"devDependencies": {
    "electron-packager": "^8.7.2"
}

3.打包—命令打包

electron-packager <项目路径 > <项目名字> <构建平台> <x86 || x64> <版本> <可选>

"build_darwin": "electron-packager ./ 'Hosts' --platform=darwin --arch=x64 --app-version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

- platform 是发布平台
    - win32指windows平台
    - linux
    - darwin
>> arch=ia32 指32位windows 64位的则为x64

4.执行命令

npm run build_darwin

5.打包工具 Pagkages NSIS

    使工具打包减少安装包体积

main.js文件示例:

// var app = require('app');  // 控制应用生命周期的模块。
// var BrowserWindow = require('browser-window');  // 创建原生浏览器窗口的模块

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

// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了,退出。
app.on('window-all-closed', function() {
  // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭,这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 但这次不是。
    mainWindow = null;
  });
});

转载于:https://www.cnblogs.com/yaotu/p/10273160.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值