NodeJs Electron 搭建基础桌面应用

哈哈阅读：710 2021-03-31 20:59:50 评论：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 .

效果截图:

标签:NodeJs

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。