Electron开端【02】--第一个Electron App

2024年4月11日 234次阅读 来源: ecmadao

目次构造与文件

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是你终究要展现的页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

运转&天生运用

经由过程electron-prebuilt运转

假如你经由过程npm全局安装了electron-prebuilt，那末在App文件目次下跑这句就可以够运转它：

electron .

假如只是在当前项面前目今安装了，则要跑：

./node_modules/.bin/electron .

经由过程Electron Binary运转

在这儿下载Electron二进制文件

翻开包内的App根据提醒操纵，或许在该文件夹下运转：

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

就可以够经由过程这个包来运转本身的运用了。

天生运用

运用写完今后，能够参照Application Distribution里的指点举行打包：

  1. 项目文件名应当命名为app

  2. 下载Electron资本文件。就是上一步内里的Electron二进制文件

  3. 把项目目次放在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

  1. 修正运用Electron.app的称号

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

  • Electron.app/Contents/Info.plist

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

运用打包

运用asar库来替换你的app文件夹，如许能够防止暴露你的源码。

天生asar包

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

  1. install

$ npm install -g asar

  1. 打包

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

# 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
    原文作者：ecmadao
    原文地址: https://segmentfault.com/a/1190000005126759
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞