Electron 從零建立一個 Windows/OS X/Linux 的桌面可執行程序

時間 2019-11-11

標籤 electron 建立一個 windows linux 桌面可執行程序欄目 Windows 简体版

原文原文鏈接

序

每次 Electron 有最新新聞的時候，都會有不少朋友留言，問有沒有相關教程，本人也是觀察有一段時間了，一直鮮有人提供相關的學習內容，因此在此就給你們提供下一些入門和進階教程，但願你們多多支持，謝謝！javascript

本文的主要目的，是要教會你們如何使用 Electron 從零建立 Windows 的 .exe 或者 OS X / linux 的桌面可執行應用程序。html

案例演示

因爲資源很少，直接將本身以前開源的一個 google chrome extension 代碼引用過來，無需修改源碼，值要配置好 electron 環境就能夠運行！插件的開源倉庫地址：http://git.oschina.net/cyzshenzhen/GJP-tools-chrome-extensionjava

1、Electron 是什麼

官方描述

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.node

我的理解

就是一個Chrome瀏覽器封裝成窗體，而後加載你作的HTML程序，直接看到效果。比較相似於手機端，基於微信的H5微網站。python

應用場景

想作桌面應用，又不會c++，又不會c#，又不會swing，也不會python等各大建立桌面窗體語言，可是會HTML、CSS，沒錯，那就是你了。linux

注意！注意！注意！

因爲 Electron 自己就是基於 Chromium 的，因此它的基礎大小就已經很大了，應該有四五十M，若是介意文件大小的話，勸您仍是再看看...c++

因爲 Electron 自己就是基於 Chromium 的，因此它的基礎大小就已經很大了，應該有四五十M，若是介意文件大小的話，勸您仍是再看看...git

因爲 Electron 自己就是基於 Chromium 的，因此它的基礎大小就已經很大了，應該有四五十M，若是介意文件大小的話，勸您仍是再看看...github

2、開發 Electron 須要會什麼

必須的

HTML
CSS
JavaScript

其餘

node.js （Electron 自己就基於node.js，不會不要緊，直接照着教程來就行）
git （demo是從git倉庫拿的，不會不要緊，本身去下載就行）
開發工具（本人使用的是 vscode）

3、Hello World！

官方三步start

$ git clone https://github.com/electron/electron-quick-start

$ cd electron-quick-start

$ npm install && npm start

啓動效果

單獨啓動web

npm start

結構分析

| -- index.html
| -- main.js
| -- package.json

index.html

你沒看錯，它就只是一個HTML而已！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

main.js

窗口配置，主要是控制窗口的高度、寬度、入口頁面、等

下面是代碼的內容，通常狀況下，只須要看下兩個地方就行

入口頁面配置：mainWindow.loadURL()
打開調試工具：mainWindow.webContents.openDevTools()

'use strict';

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 指定一個入口的html文件
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打開調試工具，其實就是chrome的那套調試工具
  //mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

package.json

項目名稱、版本信息等，以及node.js相關的依賴配置，相似於java引用.jar

electron-packager
electron-prebuilt

兩個都是用來打包成可執行應用程序的必備依賴包，細節咱們在下一個步驟裏面進行詳細的說明

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "n",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "devDependencies": {
    "electron-packager": "^5.2.1",
    "electron-prebuilt": "^0.36.0"
  }
}

4、打包爲可執行程序

一、打包

如今咱們只能經過 npm start 源碼來運行程序，如何打包成系統可執行程序，不要node.js環境也能夠用呢？這裏咱們將會用到 electron-packager、electron-prebuilt

如今，咱們使用 electron-packager 來進行打包，此處咱們打包爲 windows 系統的 .exe 程序

首先，進入項目根目錄，而後執行下面命令行

electron-packager ./ --platform=win32 --arch=x64 --version=0.37.2 --icon=./images/favicon.ico

若是還想打包 linux / OS X 環境的可執行程序，可查看幫助信息

electron-packager

便可看到相關資料，若是不明白的話，能夠留言，一塊兒學習！

二、效果

5、如何跟朋友 show 一個，裝個X

教程到這裏，入門基本已經結束了，那麼估計有些童鞋估計仍是不明白，怎麼把這個程序發給朋友，顯得本身流弊，其實很簡單的！你只須要把生成出來的那個文件夾，打一個壓縮包，而後告訴他，執行那個.exe文件就夠了！！！

= =||||

My Blog

blog.guijianpan.com

技術交流

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。