亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Electron初步【02】--第一個(gè)Electron App

Airy / 2246人閱讀

摘要：的一個(gè)例子注當(dāng)里不存在時(shí)，將會(huì)默認(rèn)使用應(yīng)當(dāng)創(chuàng)建一個(gè)窗口并處理系統(tǒng)事件。一個(gè)典型的例子如下控制生命周期的模塊創(chuàng)建原生窗口的模塊保持對(duì)窗口對(duì)象的全局引用。生成包可以把多個(gè)文件合并成一個(gè)類似于的歸檔文件。例子按照下面步驟來(lái)運(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則是啟動(dòng)你App的腳本，它將會(huì)開(kāi)啟主進(jìn)程。package.json的一個(gè)例子：

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

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

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

"use strict";

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

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

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

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

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

  // 打開(kāi) DevTools
  mainWindow.webContents.openDevTools();

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

最后，index.html是你最終要展示的頁(yè)面



  
    
    Hello World!
  
  
    
Hello World!

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

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

electron .

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

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

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

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

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

就可以通過(guò)這個(gè)包來(lái)運(yùn)行自己的應(yīng)用了。

生成應(yīng)用

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

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

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

把項(xiàng)目目錄放在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就能啟動(dòng)應(yīng)用

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

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庫(kù)來(lái)替代你的app文件夾，這樣可以避免暴露你的源碼。

生成asar包

asar可以把多個(gè)文件合并成一個(gè)類似于tar的歸檔文件。

install

$ npm install -g asar

打包

切換到含有你項(xiàng)目文件夾的父級(jí)文件夾

# dev/your-app
$ cd dev

打包項(xiàng)目

$ asar pack your-app/ app.asar

將生成的app.asar放在：

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

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

這樣你就可以不必放入app文件夾，而且你的代碼都是封裝壓縮過(guò)的。

例子

按照下面步驟來(lái)運(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79437.html

相關(guān)文章

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

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

    Ajian 評(píng)論0 收藏0

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

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

    notebin 評(píng)論0 收藏0

  • Electron折騰筆記

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

    DataPipeline 評(píng)論0 收藏0

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

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

    TwIStOy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<