NodeJs Electron 搭建基础桌面应用

最新推荐文章于 2023-09-11 09:47:28 发布

在奋斗的大道

最新推荐文章于 2023-09-11 09:47:28 发布

阅读量1.1k

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/88892118

版权

nodejs 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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 .

效果截图:

在奋斗的大道

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
NodeJs Electron 搭建基础桌面应用

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

扫一扫