成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Airy / 2159人閱讀

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

目錄結(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的腳本，它將會開啟主進(jìn)程。package.json的一個例子：

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

注：當(dāng)package.json里不存在main時，Electron將會默認(rèn)使用index.js

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

"use strict";

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

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

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

// 當(dāng)應(yīng)用初始化結(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();

  // 窗口關(guān)閉時觸發(fā)
  mainWindow.on("closed", function() {
    // 如果你的應(yīng)用允許多個屏幕，那么可以把它存在Array里。
    // 因此刪除的時候可以在這里刪掉相應(yīng)的元素
    mainWindow = null;
  });
});

最后，index.html是你最終要展示的頁面



  
    
    Hello World!
  
  
    
Hello World!

    We are using node ,
    Chrome ,
    and Electron .
運(yùn)行&生成應(yīng)用 通過electron-prebuilt運(yùn)行

如果你通過npm全局安裝了electron-prebuilt，那么在App文件目錄下跑這句就可以運(yùn)行它：

electron .

如果只是在當(dāng)前項目下安裝了，則要跑：

./node_modules/.bin/electron .
通過Electron Binary運(yùn)行

在這兒下載Electron二進(jìn)制文件

打開包內(nèi)的App按照提示操作，或者在該文件夾下運(yùn)行：

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

就可以通過這個包來運(yùn)行自己的應(yīng)用了。

生成應(yīng)用

應(yīng)用寫完以后，可以參照Application Distribution里的指導(dǎo)進(jìn)行打包：

項目文件名應(yīng)該命名為app

下載Electron資源文件。就是上一步里面的Electron二進(jìn)制文件

把項目目錄放在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

之后運(yùn)行Electron.app就能啟動應(yīng)用

現(xiàn)在，你的應(yīng)用名稱為默認(rèn)的Electron.app（或Electron.exe），可以通過如下方式修改名稱：

Windows

直接修改Electron.exe的名稱

OS X

修改應(yīng)用Electron.app的名稱

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

Electron.app/Contents/Info.plist

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

應(yīng)用打包

使用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文件夾，而且你的代碼都是封裝壓縮過的。

例子

按照下面步驟來運(yùn)行官方案例：

# 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

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

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

相關(guān)文章

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

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

    Ajian 評論0 收藏0

  • electron跳坑指南 1(electron的安裝)

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

    notebin 評論0 收藏0

  • Electron折騰筆記

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

    DataPipeline 評論0 收藏0

  • 如何搭建Electron開發(fā)環(huán)境

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

    TwIStOy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<