1,electron搭建
electron可以用js来创建丰富的桌面应用
一个electron应用的目录结构
your-app/
├── package.json
├── main.js
└── index.html
1，安装electron：全局安装
npm install electron -g
2，package.json内容
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
3，如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js
创建main.js文件
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;
});
});
4，创建展示的index.html文件
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
5，运行应用
electron .
1,electron搭建的更多相关文章
- 使用electron搭建桌面app的简便方法
使用electron官方给出的`electron-quick-start`示例项目,将其拷贝下来, 1. git命令: git clone https://github.com/electron/ ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（四）
在软件的世界里面,创建一个新项目很容易,但是坚持将他们开发完成并发布却并非易事.分发软件就是一个分水岭, 分水岭的一边是那些完成的被全世界用户在用的软件,而另外一边则是启动了无数项目却没有一个完成的. ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（三）
第二篇博客中我们可以看到我们构建的桌面应用会显示我们的文件及文件夹. In the second blog, we can see that the desktop application we bu ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（二）
这个文件浏览器应用可以具备以下两种功能噢- This file browser application can have the following two functions. 一:用户浏览文件夹和 ...
- electron搭建开发环境
环境:windons10, nodev14.17.1, vscode md a_star cd a_star npm i -g yarn yarn config set ELECTRON_MIRROR ...
- Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用
基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...
- Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统
基于vite2.x+electron12桌面端后台管理系统Vite2ElectronVAdmin. 继上一次分享vite2整合electron搭建后台框架,这次带来的是最新开发的跨桌面中后台权限管理系 ...
- 2016年度 JavaScript 展望（下）
[编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...
- Electron-Vite2-MacUI桌面管理框架|electron13+vue3.x仿mac桌面UI
基于vue3.0.11+electron13仿制macOS桌面UI管理系统ElectronVue3MacUI. 前段时间有分享一个vue3结合electron12开发后台管理系统项目.今天要分享的是最 ...
随机推荐
- mkfs格式化分区（为分区写入文件系统）
mkfs 命令非常简单易用,不过是不能调整分区的默认参数的(比如块大小是 4096 Bytes),这些默认参数除非特殊清况,否则不需要调整.如果想要调整,就需要使用 mke2fs 命令重新格式化.命令 ...
- cross-env 使用方式
cross-env能跨平台设置及使用环境变量 大多数情况下,在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡住,windows平台与POSIX在使用命令行时有 ...
- 安装kvm安装虚拟机centos
1 安装阿里云的镜像站 #将原来的镜像备份 cd /etc/yum.repos.d/ mkdir back mv CentOS-Base.repo ./back/ # 安装阿里的镜像 wget -O ...
- Qt编写自定义控件44-天气仪表盘
一.前言 天气仪表盘控件是所有控件中唯一一个使用了svg矢量图的控件,各种天气图标采用的矢量图,颜色变换采用动态载入svg的内容更改生成的,其实也可以采用图形字体来做,本次控件为了熟悉下svg在Qt中 ...
- 讲sql注入原理的 这篇不错(有空可以看看)
我们围绕以下几个方面来看这个问题: 1.什么是sql注入? 2.为什么要sql注入? 3.怎样sql注入? 1.什么是sql注入? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或 ...
- 【转】Selenium-WebDriverApi接口详解
浏览器操作 # 刷新 driver.refresh() # 前进 driver.forward() # 后退 driver.back() 获取标签元素 # 通过ID定位目标元素 driver.find ...
- ABAP ole操作1
转自:https://www.cnblogs.com/jxzhu/p/8708686.html OLE整理: 1.定义,分别对应EXCEL,workbook(工作簿),sheet(页),单元格 DAT ...
- Core Data 的线程安全问题
前言: 很多小的App只需要一个ManagedContext在主线程就可以了,但是有时候对于CoreData的操作要耗时很久的,比如App开启的时候要载入大量数据,如果都放在主线程,毫无疑问会阻塞UI ...
- Yarn使用笔记
1.安装需要下载安装包(这里只介绍windows系统的安装) 安装成功,会如图提示! 版本号:Yarn安装包-yarn-0.24.6 安装包下载地址:链接:http://pan.baidu.com/s ...
- idea的enable auto-import/内存设置
设置pom.xml依赖的自动导入 设置idea的memory heap On the Help menu, click Edit Custom VM Options. Set the -Xmx opt ...