NodeJs Electron 搭建基础桌面应用

秒速五厘米 2023-10-18 16:23 123阅读 0赞

Electron 概述

Electron为用纯JavaScript创建桌面应用提供了运行时。原理是，Electron调用你在package.json中定义的main文件并执行它。main文件（通常被命名为main.js）会创建一个内含渲染完的web页面的应用窗口，并添加与你操作系统的原生GUI（图形界面）交互的功能。

第一步：基于NodeJs 环境，创建NodeJs 应用

C:\node_workspace>mkdir mongodb_desk
    
    C:\node_workspace>cd mongodb_desk
    
    C:\node_workspace\mongodb_desk>cnpm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (mongodb_desk)
    version: (1.0.0)
    description:
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to C:\node_workspace\mongodb_desk\package.json:
    
    {
      "name": "mongodb_desk",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this OK? (yes) yes
    
    C:\node_workspace\mongodb_desk>mkdir public
    
    C:\node_workspace\mongodb_desk>mkdir routes
    
    C:\node_workspace\mongodb_desk>mkdir views

第二步：本地安装Electron模块，本地项目依赖Electron模块。

C:\node_workspace\mongodb_desk>cnpm install electron
    √ Installed 1 packages
    √ Linked 132 latest versions
    Downloading tmp-10380-1-SHASUMS256.txt-4.1.2
    [============================================>] 100.0% of 4.74 kB (4.74 kB/s)
    √ Run 1 scripts
    Recently updated (since 2019-03-22): 3 packages (detail see file C:\node_workspace\mongodb_desk\node_modules\.recently_updates.txt)
      Today:
        → electron@*(4.1.2) (06:29:53)
    √ All packages installed (142 packages installed from npm registry, used 15s(network 2s), speed 377.99kB/s, json 133(254.73kB), tarball 507.68kB)

编辑mongodb\_desk应用的package.json，引入electron模块。

{
      "name": "mongodb_desk",
      "version": "1.0.0",
      "description": "",
      "main": "app.js", 
      "scripts": {
    	"start": "electron ."
      },
      "author": "",
      "license": "ISC"
    }

"main" 属性：指定nodejs 程序入口js 文件

"scripts"属性：指定本应用依赖的第三方模块(electron)

第三步：创建app.js 文件和index.html文件

项目(mongodb\_desk)根路径创建app.js

const {
        app,
        BrowserWindow
    } = require('electron')
    const path = require('path')
    const url = require('url')
    
    function createWindow() {
        //创建浏览器窗口
        win = new BrowserWindow({
            width: 800,
            height: 600
        })
    
        //让浏览器加载index.html
        win.loadURL(url.format({
            pathname: path.join(__dirname, './views/index.html'),
            protocol: 'file:',
            slashes: true
        }))
    }
    
    //执行
    app.on('ready', createWindow)

项目(mongodb\_desk)/views 文件夹创建index.html

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

第四步：nodejs 安装依赖和启动

C:\node_workspace\mongodb_desk>cnpm install
    √ Installed 0 packages
    √ Linked 0 latest versions
    √ Run 0 scripts
    √ All packages installed (used 33ms(network 15ms), speed 0B/s, json 0(0B), tarball 0B)
    
    C:\node_workspace\mongodb_desk>cnpm start
    
    > mongodb_desk@1.0.0 start C:\node_workspace\mongodb_desk
    > electron .

效果截图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190329144955642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70