NodeJs Electron 搭建基础桌面应用分析

哈哈 阅读:280 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 
 
> [email protected] start C:\node_workspace\mongodb_desk 
> electron .

效果截图:

声明

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

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号