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搭建的更多相关文章

  1. 使用electron搭建桌面app的简便方法

    使用electron官方给出的`electron-quick-start`示例项目,将其拷贝下来, 1. git命令:   git clone https://github.com/electron/ ...

  2. 跟我一起使用electron搭建一个文件浏览器应用吧（四）

    在软件的世界里面,创建一个新项目很容易,但是坚持将他们开发完成并发布却并非易事.分发软件就是一个分水岭, 分水岭的一边是那些完成的被全世界用户在用的软件,而另外一边则是启动了无数项目却没有一个完成的. ...

  3. 跟我一起使用electron搭建一个文件浏览器应用吧（三）

    第二篇博客中我们可以看到我们构建的桌面应用会显示我们的文件及文件夹. In the second blog, we can see that the desktop application we bu ...

  4. 跟我一起使用electron搭建一个文件浏览器应用吧（二）

    这个文件浏览器应用可以具备以下两种功能噢- This file browser application can have the following two functions. 一:用户浏览文件夹和 ...

  5. electron搭建开发环境

    环境:windons10, nodev14.17.1, vscode md a_star cd a_star npm i -g yarn yarn config set ELECTRON_MIRROR ...

  6. Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用

    基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...

  7. Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统

    基于vite2.x+electron12桌面端后台管理系统Vite2ElectronVAdmin. 继上一次分享vite2整合electron搭建后台框架,这次带来的是最新开发的跨桌面中后台权限管理系 ...

  8. 2016年度 JavaScript 展望（下）

    [编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...

  9. Electron-Vite2-MacUI桌面管理框架|electron13+vue3.x仿mac桌面UI

    基于vue3.0.11+electron13仿制macOS桌面UI管理系统ElectronVue3MacUI. 前段时间有分享一个vue3结合electron12开发后台管理系统项目.今天要分享的是最 ...

随机推荐

  1. Choosing a fast unique identifier (UUID) for Lucene——有时间再看下

    Most search applications using Apache Lucene assign a unique id, or primary key, to each indexed doc ...

  2. equal numbers

    给你一个n长度的数组,让你修改0到n次,问每次修改后能剩下不同个数的最小数是多少: 这里有了两种做法,一种是变成他们的lcm这样的话,修改后答案应该是减去改过的个数然后在加一 另一种就是数字修改成序列 ...

  3. arcgis python 布局视图中文本查找替换

    # Author: ESRI # Date: July 5, 2010 # Version: ArcGIS 10.0 # Purpose: This script will perform a sea ...

  4. 关于路由跟踪指令---traceroute

    我们都用过ping命令来检查主机与目标地址是否连通,自己的主机与目标地址的通讯包通讯速率,所谓的通讯包也就是那些什么TCP/IP,UDP包. 原理:https://www.cnblogs.com/be ...

  5. 基础数据结构 对应 基础api

    <深入理解Redis> mastering redis

  6. 【转载】 AutoML总结

    原文地址: https://jinxin0924.github.io/2017/12/21/AutoML%E6%80%BB%E7%BB%93/ Posted by JxKing on December ...

  7. mxnet深度学习实战学习笔记-9-目标检测

    1.介绍 目标检测是指任意给定一张图像,判断图像中是否存在指定类别的目标,如果存在,则返回目标的位置和类别置信度 如下图检测人和自行车这两个目标,检测结果包括目标的位置.目标的类别和置信度 因为目标检 ...

  8. 算法习题---3.08循环小数（UVa202）

    一:题目 输入整数a和b(<=a<=,<=b<=),输出a/b的循环小数表示以及循环节长度. 例如,a=,b=,小数表示为0.(),循环字节长度为21 当循环节长度超过50时, ...

  9. VCL组件之TPanel

    TPanel位于Standard组件面板上,也是常用的一种容器控件.面板的一个优点就是放在面板上的组件称为面板的一部分,因此它们与面板一起移动.这在设计阶段很有用. Panel组件的大部分功能在于其A ...

  10. linux中安装docker

    uname -r yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ ...