【Electron】 Electron 开发桌面应用(一) 编写→运行→打包
一. 准备工作
1. 首先,我们要安装electron-prebuilt,它是一个npm模块,因此我们可以使用Npm来进行安装,它是一个electron的预编译版本。
npm install -g electron-prebuilt
2. 接下来安装electron-packager ,它也是一个npm模块,是一个用于打包electron应用的工具,具体使用方法我们稍后会详细说明 。
npm install -g electron-packager
二. 创建一个应用
创建一个electron应用。我们现在仅仅需要3个文件。
index.html
main.js
package.json
index.html使我们想要显示的页面,main.js为此应用的入口,package.json为npm项目的配置文件。
1.新建一个名为myApp的文件夹
2.进入项目目录进行初始化
cd myApp
npm init
3.新建一个package.json,内容如下:
{"name": "zzh","version": "0.0.1","description": "a simple application","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."},"author": "zzh","license": "ISC"
}
4.新建一个index.html, 内容如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><h1>hello electron</h1>
</body>
</html>
5. 新建一个main.js, 内容如下:(main.js的文件名对应package.json中main的值)
const {app, BrowserWindow} = require('electron');
let win;
let windowConfig = {width:800,height:600
};
function createWindow(){win = new BrowserWindow(windowConfig);win.loadURL(`file://${__dirname}/index.html`);//开启调试工具win.webContents.openDevTools();win.on('close',() => {//回收BrowserWindow对象win = null;});win.on('resize',() => {win.reload();})
}app.on('ready',createWindow);
app.on('window-all-closed',() => {app.quit();
});app.on('activate',() => {if(win == null){createWindow();}
})
关于浏览器BrowserWindow模块更多的参数设置可以查看官方文档https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html
三. 运行
现在只要在myApp目录下执行npm start 就可以运行了
npm start
因为我们在main.js中写了win.webContents.openDevTools(); 开启了浏览器调试工具,所以我们打开的界面是这样的:
四. 打包
现在整个过程进行到最后一步,我们需要打包我们自己的应用,那么如何打包,这就需要用到我们先前已经安装的electron-packager
打开命令行我们可以这样使用它:
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1
大概格式是这样的:
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
但是这样并不够,会提示:
Unable to determine Electron version. Please specify an Electron version
我们需要指明Electron version。这个参数是当前安装Electron的版本,不知道的可以直接electron就能看到了,我这里是1.4.13,经过改进后如下:
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=0.0.1 --electron-version=1.4.13
执行完毕后,看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序HelloWorld.exe就可以直接打开桌面应用了。
但是每次打包的执行命令太长太麻烦了,所以我们可以把命令写进package.json中,执行命令调用它就好了。
更改后的package.json如下:
{"name": "zzh","version": "0.0.1","description": "a simple application","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron .","package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13"},"author": "zzh","license": "ISC"
}
这样我们每次打包只需要执行 npm run-script package就可以了。
npm run-script package
五. 更改图标
如果我们想要更改窗口左上角的图标和任务栏的图标,只需要在打包的命令上加个icon参数就好了
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=1.4.13 --icon=./app/img/icon.ico
六. 当然,我们打包好的应用最后是要发给客户使用,那么,怎么把我们的electron应用整合成一个安装包呢?
可以使用下面两种方法:
1. NSIS打包Electron: http://blog.csdn.net/yu17310133443/article/details/79496499
2. grunt打包Electron: http://blog.csdn.net/yu17310133443/article/details/79495936
【Electron】 Electron 开发桌面应用(一) 编写→运行→打包相关推荐
- macos安装python-nodejs_nodejs(1):mac 安装nodejs amp; electron 环境开发桌面应用
1,下载node安装包 Electron 是 Github 发布跨平台桌面应用开发工具,支持 Web 技术开发桌面应用开发,其本身是基于 C++ 开发的,GUI 核心来自于 Chrome,而 Java ...
- Electron前端开发桌面程序--入门篇
前言 前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个 ...
- electron 前端开发桌面应用
electron是由Github开发,是一个用Html.css.JavaScript来构建桌面应用程序的开源库,可以打包为Mac.Windows.Linux系统下的应用. 快速开始 接下来,让代码来发 ...
- 迅为RK3568开发板Ubuntu系统编写运行Qt工程
1 执行以下命令启动 Qtcreator 程序,进入 qtcreator 界面. /opt/Qt5.14.2/Tools/QtCreator/bin/qtcreator 2 然后新建一个 Qt 工程, ...
- JS是世界上最好的语言—— 使用Electron开发桌面应用(一)
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用. 你可以把它看作一个专注于桌面应用的 Node. js 的变体,而不是 Web 服务器. ...
- Electron开发桌面应用
由 Bazzzinga威 同学翻译自 Medium.https://medium.com/developers-writing/building-a-desktop-application-with- ...
- 前端实战:electron+vue3+ts开发桌面端便签应用
前端时间我的一个朋友为了快速熟悉 Vue3 开发, 特意使用 electron+vue3+ts 开发了一个桌面端应用, 并在 github 上开源了, 接下来我就带大家一起了解一下这个项目, 在文章末 ...
- electron 打包_Electron结合React开发桌面应用
React 结合 Electron 开发桌面应用入门 Electron 是 Github 发布的跨平台桌面应用开发工具,它支持使用 web 技术来开发桌面应用,即你可以使用 Html+css+Java ...
- electron结合JAVAweb_Electron结合React开发桌面应用
React 结合 Electron 开发桌面应用入门 Electron 是 Github 发布的跨平台桌面应用开发工具,它支持使用 web 技术来开发桌面应用,即你可以使用 Html+css+Java ...
最新文章
- Java单元测试之JUnit4详解
- Nginx 负载均衡 - linux下nginx加载配置文件异常处理,提示invalid PID number in “/run/nginx.pid“问题解决
- 将查询结果插入到现有表中
- ZooKeeper入门(二)Java操作zookeeper
- python while循环true_Python while循环,pause while not,true时继续?
- Linux bash总结(一) 基础部分(适合初学者学习和非初学者参考)
- jQueryEasyUI框架 - panel 选项卡高度自适应
- SequoiaDB数据水平分区简介
- android canvas自适应屏幕,html5 Canvas 如何自适应屏幕大小?
- A Software Developer’s Reading Plan
- Java代码优化的一些方法(总结)
- 华创e路航固件_华创e路航地图升级
- php面向对象常见的专业术语
- Linux中的截图工具
- 【第16章】 网络安全风险评估技术原理与应用 (软考:信息安全工程师)-- 学习笔记
- go语言宕机(panic)——程序终止运行
- C++中switch用法的意义
- 电流型和电压模拟量信号有何区别,如何互相转换
- 详细理解HashMap数据结构,太齐全了!
- macbook air扩展显示器全屏滑动怎样不一起滑动?
热门文章
- 对内对外烧钱,还顾自去门店化,独角兽爱屋吉屋终将归隐?
- JS刷题第一天| 704. 二分查找、27. 移除元素
- java jframe设置布局_Java JFrame常用的布局
- 微信登录/第三方登录
- 姿态的三种描述方式——欧拉角、轴角、四元数
- 监督与非监督学习的区别
- BJFU_数据结构习题_229链表的分解
- 2017第八届蓝桥杯C/C++ B组省赛个人代码
- python:Non-ASCII character ‘\xe2′ in file
- LeetCode Q6-Q10练习笔记 (Python3)