Electron初步【02】--第一个Electron App

Airy 发布于2019-08-19 18:18 / 1989人阅读

摘要：的一个例子注当里不存在时，将会默认使用应当创建一个窗口并处理系统事件。一个典型的例子如下控制生命周期的模块创建原生窗口的模块保持对窗口对象的全局引用。生成包可以把多个文件合并成一个类似于的归档文件。例子按照下面步骤来运行官方案例

目录结构与文件

Electron App的目录结构如下：

your-app/
├── package.json
├── main.js
└── index.html

其中的package.json和Node Modules里表现的一样，而main.js则是启动你App的脚本，它将会开启主进程。package.json的一个例子：

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注：当package.json里不存在main时，Electron将会默认使用index.js

main.js应当创建一个窗口并处理系统事件。一个典型的例子如下：

"use strict";

const electron = require("electron");
const app = electron.app;  // 控制App生命周期的模块
const BrowserWindow = electron.BrowserWindow;  // 创建原生窗口的模块

// 保持对窗口对象的全局引用。如果不这么做的话，JavaScript垃圾回收的时候窗口会自动关闭
var mainWindow = null;

// 当所有的窗口关闭的时候退出应用
app.on("window-all-closed", function() {
  // 在 OS X 系统里，除非用户按下Cmd + Q，否则应用和它们的menu bar会保持运行
  if (process.platform != "darwin") {
    app.quit();
  }
});

// 当应用初始化结束后调用这个方法，并渲染浏览器窗口
app.on("ready", function() {
  // 创建一个窗口
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载index.js
  mainWindow.loadURL("file://" + __dirname + "/index.html");

  // 打开 DevTools
  mainWindow.webContents.openDevTools();

  // 窗口关闭时触发
  mainWindow.on("closed", function() {
    // 如果你的应用允许多个屏幕，那么可以把它存在Array里。
    // 因此删除的时候可以在这里删掉相应的元素
    mainWindow = null;
  });
});

最后，index.html是你最终要展示的页面



  
    
    Hello World!
  
  
    Hello World!
    We are using node ,
    Chrome ,
    and Electron .

运行&生成应用 通过electron-prebuilt运行

如果你通过npm全局安装了electron-prebuilt，那么在App文件目录下跑这句就可以运行它：

electron .

如果只是在当前项目下安装了，则要跑：

./node_modules/.bin/electron .

通过Electron Binary运行

在这儿下载Electron二进制文件

打开包内的App按照提示操作，或者在该文件夹下运行：

$ ./Electron.app/Contents/MacOS/Electron your-app/

就可以通过这个包来运行自己的应用了。

生成应用

应用写完以后，可以参照Application Distribution里的指导进行打包：

项目文件名应该命名为app

下载Electron资源文件。就是上一步里面的Electron二进制文件

把项目目录放在Electron资源文件夹下

Mac OS X:

electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html

Windows & Linux:

electron/resources/app
├── package.json
├── main.js
└── index.html

之后运行Electron.app就能启动应用

现在，你的应用名称为默认的Electron.app（或Electron.exe），可以通过如下方式修改名称：

Windows

直接修改Electron.exe的名称

OS X

修改应用Electron.app的名称

修改文件中的CFBundleDisplayName，CFBundleIdentifier，以及CFBundleName字段。它们的所在位置：

Electron.app/Contents/Info.plist

`Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
`

应用打包

使用asar库来替代你的app文件夹，这样可以避免暴露你的源码。

生成asar包

asar可以把多个文件合并成一个类似于tar的归档文件。

install

$ npm install -g asar

打包

切换到含有你项目文件夹的父级文件夹

# dev/your-app
$ cd dev

打包项目

$ asar pack your-app/ app.asar

将生成的app.asar放在：

// OS X
electron/Electron.app/Contents/Resources/
└── app.asar

// Windows & Linux
electron/resources/
└── app.asar

这样你就可以不必放入app文件夹，而且你的代码都是封装压缩过的。

例子

按照下面步骤来运行官方案例：

# Clone the repository
$ git clone https://github.com/atom/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start

超融合服务器私有云 electron webrtc electron electron使用webrtc electron结合webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79437.html

Electron初步【01】--主进程VS渲染进程&不同页面间共享数据

摘要：主进程渲染进程主进程在中，跑里的主脚本的进程叫作主进程。主进程负责掌管所有的页面和它们相应的渲染进程。不同页面间共享数据非常简单，使用就能完成。 Electron使用了网页页面作为App的GUI，因此你可以将它看做是一个由JavaScript控制的一个小型的Chrome内核浏览器。主进程VS渲染进程主进程在Electron中，跑package.json里的主脚本的进程叫作主进程。...

Ajian 2019-08-19 18:18 评论0 收藏0
electron跳坑指南 1(electron的安装)

摘要：我们在执行首先全局安装或者可以用创建项目进入到项目里面运行项目这样就完成了前言: 对于electron的介绍大家可以自己百度,这个使用写客户端软件很爽,写下心得以便于大家学习和使用! 我本地开发环境为:Mac OS目录在 :/Volumes/lee/electron/开发工具:phpstorm 第一章介绍electron的安装: 对于electron 的安装方式有很多第1种方式:...

notebin 2019-08-26 12:12 评论0 收藏0
Electron折腾笔记

摘要：读取文件路径写入配置文件调用服务调用服务部分，主要用到的子进程。最后，上一张初步完成之后的运行图博客原文背景部门的项目每次开发都需要手动开启三个服务：server、webpack、grunt，每个服务都要输入一些东西（端口号，项目命，项目类型，启动器名）。而且，在推送调试的时候，这三项服务非常容易被终止掉，然后又得一个个开起来，总之每天都要来上那么10几遍吧。看图：showImg(...

DataPipeline 2019-08-22 10:37 评论0 收藏0
如何搭建Electron开发环境

摘要：原文发表于如何搭建开发环境这个项目结构是我在编写基于和的七牛文件上传总结出来的本文主要介绍如何从零开始搭建高效的开发环境主要内容如下通过合理的目录划分来组织代码使用简化开发如何在渲染进程开发时使用热更新如何在主进程开发时使用自动重启如何在主原文发表于 https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/ 这个项目结构是我在编写...

TwIStOy 2019-08-21 12:05 评论0 收藏0