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

Airy 發(fā)布于2019-08-19 18:18 / 2140人閱讀

摘要：的一個例子注當里不存在時，將會默認使用應當創(chuàng)建一個窗口并處理系統(tǒng)事件。一個典型的例子如下控制生命周期的模塊創(chuàng)建原生窗口的模塊保持對窗口對象的全局引用。生成包可以把多個文件合并成一個類似于的歸檔文件。例子按照下面步驟來運行官方案例

目錄結(jié)構(gòu)與文件

Electron App的目錄結(jié)構(gòu)如下：

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

其中的package.json和Node Modules里表現(xiàn)的一樣，而main.js則是啟動你App的腳本，它將會開啟主進程。package.json的一個例子：

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

注：當package.json里不存在main時，Electron將會默認使用index.js

main.js應當創(chuàng)建一個窗口并處理系統(tǒng)事件。一個典型的例子如下：

"use strict";

const electron = require("electron");
const app = electron.app;  // 控制App生命周期的模塊
const BrowserWindow = electron.BrowserWindow;  // 創(chuàng)建原生窗口的模塊

// 保持對窗口對象的全局引用。如果不這么做的話，JavaScript垃圾回收的時候窗口會自動關閉
var mainWindow = null;

// 當所有的窗口關閉的時候退出應用
app.on("window-all-closed", function() {
  // 在 OS X 系統(tǒng)里，除非用戶按下Cmd + Q，否則應用和它們的menu bar會保持運行
  if (process.platform != "darwin") {
    app.quit();
  }
});

// 當應用初始化結(jié)束后調(diào)用這個方法，并渲染瀏覽器窗口
app.on("ready", function() {
  // 創(chuàng)建一個窗口
  mainWindow = new BrowserWindow({width: 800, height: 600});

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

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

  // 窗口關閉時觸發(fā)
  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二進制文件

打開包內(nèi)的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就能啟動應用

現(xiàn)在，你的應用名稱為默認的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

GPU云服務器云服務器 electron webrtc electron electron使用webrtc electron結(jié)合webrtc

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79437.html

Electron初步【01】--主進程VS渲染進程&不同頁面間共享數(shù)據(jù)

摘要：主進程渲染進程主進程在中，跑里的主腳本的進程叫作主進程。主進程負責掌管所有的頁面和它們相應的渲染進程。不同頁面間共享數(shù)據(jù)非常簡單，使用就能完成。 Electron使用了網(wǎng)頁頁面作為App的GUI，因此你可以將它看做是一個由JavaScript控制的一個小型的Chrome內(nèi)核瀏覽器。主進程VS渲染進程主進程在Electron中，跑package.json里的主腳本的進程叫作主進程。...

Ajian 2019-08-19 18:18 評論0 收藏0
electron跳坑指南 1(electron的安裝)

摘要：我們在執(zhí)行首先全局安裝或者可以用創(chuàng)建項目進入到項目里面運行項目這樣就完成了前言: 對于electron的介紹大家可以自己百度,這個使用寫客戶端軟件很爽,寫下心得以便于大家學習和使用! 我本地開發(fā)環(huán)境為:Mac OS目錄在 :/Volumes/lee/electron/開發(fā)工具:phpstorm 第一章介紹electron的安裝: 對于electron 的安裝方式有很多第1種方式:...

notebin 2019-08-26 12:12 評論0 收藏0
Electron折騰筆記

摘要：讀取文件路徑寫入配置文件調(diào)用服務調(diào)用服務部分，主要用到的子進程。最后，上一張初步完成之后的運行圖博客原文背景部門的項目每次開發(fā)都需要手動開啟三個服務：server、webpack、grunt，每個服務都要輸入一些東西（端口號，項目命，項目類型，啟動器名）。而且，在推送調(diào)試的時候，這三項服務非常容易被終止掉，然后又得一個個開起來，總之每天都要來上那么10幾遍吧。看圖：showImg(...

DataPipeline 2019-08-22 10:37 評論0 收藏0
如何搭建Electron開發(fā)環(huán)境

摘要：原文發(fā)表于如何搭建開發(fā)環(huán)境這個項目結(jié)構(gòu)是我在編寫基于和的七牛文件上傳總結(jié)出來的本文主要介紹如何從零開始搭建高效的開發(fā)環(huán)境主要內(nèi)容如下通過合理的目錄劃分來組織代碼使用簡化開發(fā)如何在渲染進程開發(fā)時使用熱更新如何在主進程開發(fā)時使用自動重啟如何在主原文發(fā)表于 https://lleohao.github.io/2017/09/02/如何搭建Electron開發(fā)環(huán)境/ 這個項目結(jié)構(gòu)是我在編寫...

TwIStOy 2019-08-21 12:05 評論0 收藏0