Electron入门—Hello world

傷城~ 2022-03-17 06:58 323阅读 0赞

不论是学习语言亦或是各种框架，最开始上手都必然是"Hello World"类型的简单编程。那么我作为一个Electron的初学者自然也不例外。

Electron应用从开发的角度来看可以视作是一个Node.js应用。所以一个基本的Electron应用的文件目录应该会是下面这个样子的（当然了，除了`package.json`其他文件的文件名都不一定）：

Hello World/
    ├── package.json
    ├── main.js
    └── index.html

### 文章目录 ###

*  package.json
 *  main.js
 *  index.html
 *  效果

# package.json #

那么既然是可以看作是Node.js应用，那么程序的入口也与Node.js相同是`package.json`文件。而一个基本的`package.json`文件有三个字段：

{
        "name"   : "Hello-World-App",
        "version": "1.0.0",
        "main"   : "main.js"
    }

其中又属`main`字段最为重要，因为Electron运行`main`字段所指脚本的进程为**主进程**。在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。值得注意的是，如果省略了`main`字段，那么将会去尝试加载`index.js`。

# main.js #

接着就来看`main.js`。

'user strict'
    
    const {
        app, BrowserWindow} = require('electron');
    let   mainWindow           = null;                 //应用窗口的引用
    
    app.on('window-all-closed', ()=>{
        
        if(process.platform !== 'darwin'){
        
            app.quit();
        }
    });
    
    app.on('ready', ()=>{
        
        mainWindow = new BrowserWindow();
        mainWindow.loadFile('index.html');
        mainWindow.on('closed', ()=>{
        
            mainWindow = null;
        });
    });

`app`对象是**Electron应用对象的引用，控制着应用程序的事件生命周期。** 例如`ready`事件，它将会在应用程序初始化之后被触发。

而`BroswerWindow`对象则**负责创建和控制窗口**。在官方文档中是这么描述的

> 主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

所以`new BroswerWindow()`这一操作可以理解为新打开一个浏览器窗口，而`mainWindow.loadFile(‘index.html’)`则可以理解为是在这一新打开的窗口中访问`index.html`页面。

# index.html #

这一部分没有什么新鲜的，就是写一个普通的网页。

<!DOCTYPE html>
    <html>
        <head>
            <title>Hello World</title>
            <meta charset="utf-8"/>
            <script type="text/javascript">
                function clickHandler(e){
         
                    alert('Hello world');
                }
            </script>
            <style>
                *{
         
                    margin: 0;
                    padding: 0;
                }
                html, body, section{
         
                    height: 100%;
                }
                section{
         
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: linear-gradient(45deg, #ececec 0%, #fff 100%);
                    text-align: center;
                }
                button{
         
                    width: 200px;
                    height: 60px;
                }
            </style>
        </head>
        <body>
            <section>
                <button onclick="clickHandler()">Click Me!</button>
            </section>
        </body>
    </html>

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

[Github地址][Github]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20220317/252e761669094c6bb49d67e5d16904da.png
[Github]: https://github.com/Meskjei/Electron-study