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开发后台管理系统项目.今天要分享的是最 ...
随机推荐
- C#-片段：外侧代码
ylbtech-C#-片段:外侧代码 1.返回顶部 ·#if #if true #endif ·#region #region MyRegion #endregion ·namespace names ...
- JavaScript Functional Programming：声明式与命令式
函数式编程属于声明式编程(declarative programming)的范畴,经常跟声明式编程一块儿讨论的是命令式编程(imperative programming),因为它们是两种不太一样的风格 ...
- int 和String之间的相互转换
int ---> String 1. 和 "" 进行拼接 2. 使用String类中的静态方法valueOf: public static String valueOf(in ...
- websphere 英文版部署（更新）项目【我】
websphere 部署(更新)项目 首先在控制台页面依次点左侧,打开应用配置页面: 然后在右侧勾选我们要重新部署的项目,首先点上面的 停止 按钮,等项目停止后,再勾选项目,点上面的 更新 按钮(如 ...
- npm教程、脚手架
使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的 ...
- python 中密码处理函数
一个简单的对某字符串进行 MD5加密 import hashlib def md5_pwd(pwd): """ 为了防止解密,hashlib.md5时加入自己的字段 将密 ...
- hadoop：/bin/bash: /bin/java: No such file or directory
Stack trace: ExitCodeException exitCode=127 In HADOOP_HOME/libexec/hadoop-config.sh look for the if ...
- 树莓派连接显示器后设置ssh服务开机自动开启
进入命令行,然后执行: cd /boot sudo touch ssh sudo restart -r now 然后就重新启动了,重启好了会有依据提示. 然后可以输入ssh localhost进行一下 ...
- 【Leetcode_easy】686. Repeated String Match
problem 686. Repeated String Match solution1: 使用string类的find函数: class Solution { public: int repeate ...
- .net视频截图功能，没测试
/// <summary> /// @从视频文件截图,生成在视频文件所在文件夹 /// 在Web.Config 中需要两个前置配置项: /// 1.ffmpeg.exe文件的路径 /// ...