electron 构建桌面应用

最新推荐文章于 2025-10-26 11:02:03 发布

原创最新推荐文章于 2025-10-26 11:02:03 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#electron #github #桌面应用 #javascript

前端专栏收录该内容

186 篇文章

订阅专栏

文章目录

创建文件夹并安装开发依赖包
构建
加载网页或本地文件
引入额外的 js 文件
打开开发者工具
读取本地文件内容

将会在这篇文章中指导构建一个简单的桌面应用。
使用 JavaScript 开发桌面应用意味着在打包（package application）的时候你会需要根据操作系统的不同发出不同的命令。这一行为是将原生桌面应用兼容不同平台的概念抽象出来，方便维护应用。现在，我们可以借助 Electron 开发一个桌面应用。

创建文件夹并安装开发依赖包

创建文件夹electron-demo，或命名为其它自己喜爱的名字。并在文件夹下创建下列文件，全部留空即可。

.
├── index.html
└── main.js

执行 npm init 命令，生成 package.json 文件。其中 scripts 部分设置为 “start”: “electron main.js”。

接下来安装所需的依赖包（npm默认源链接缓慢的，请使用淘宝国内镜像）：

npm install --save-dev electron-prebuilt

完成后 package.json 文件如下：

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^1.4.13"
  }
}

完成以上步骤之后文件夹目录结构如下：

.
├── index.html
├── main.js
└── package.json

构建

既然是个桌面程序，第一步自然是程序启动后要打开个窗口吧。在 main.js 中添加下面的代码：

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
app.on('ready', function () {
    var mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });
});

很明显 electron 为开发者提供了方便好用的 API 可供调用。app 控制整个程序的生命周期，BrowserWindow 可以打开一个浏览器窗口。

Electron 引入了两个新的概念 Main Process 和 Renderer Process 。以目前浅显的理解，Main Process 指的就是浏览器窗口，Renderer Process 指的就是网页。

在 main.js 中添加好上面的代码后保存，在命令行运行 npm start，应该就会打开一个 800*600 像素的空白窗口。从而也证明程序可以正常跑起来了。

加载网页或本地文件

既然打开了一个浏览器窗口，第一个想法自然就是，咱们开个网页吧。在 main.js 里面使用一个简单的方法，就可以达到目的啦。

app.on('ready', function () {
    var mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })
    
    mainWindow.loadURL('https://github.com/Neveryu')
})

重新执行 npm start 启动程序之后就可以见到效果。

可是我们在建一个桌面程序呢，肯定是要加载自己写的文件吧。loadURL 同样可以为我们做到。把传入的参数改为本地文件路径就可以啦。

首先在 index.html 里面加点简单的内容，好让渲染成功之后能看到点东西。

<html>
    <head>
        <meta charset="UTF-8">
        <title>electron-quick-start</title>
    </head>
    <body>
        <div class="main">hello world</div>
    </body>
</html>

main.js 里面修改成加载本地文件：

app.on('ready', function () {
    var mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })
    
    mainWindow.loadURL('file://' + __dirname + '/index.html')
})

重启程序应该就可以看见页面渲染出 hello world 字符串了。

引入额外的 js 文件

打开 html 文件成功的话，下一步自然就是引入一下 jquery 和其它的 js 吧。下面在文件夹根目录放入 jquery-2.0.2.js ，再创建一张 app.js。并在 index.html 里面引入：

<html>
    <head>
        <meta charset="UTF-8">
        <title>electron-quick-start</title>
    </head>
    <body>
        <div class="main"></div>
    </body>
    <script>require('./jquery-2.0.2.js')</script>
    <script>require('./app.js')</script>
</html>

有了 jquery，下面的步骤自然就是操作一下 dom 了。我们在 app.js 里面简单地搞一下：

$('.main').text('helloworld')

重启程序。OK，很棒。

如果我们引入的是 jquery-2.1.4.js 及其以上的版本。
重启程序，可能就看不到 hello world 。

打开开发者工具

好了，这应该是哪里出错了吧。是不是开始怀念 chrome dev tool 了？

既然我们是打开了一个浏览器窗口，那应该也能打开 dev tool 才是。Bingo！Electron 可以为你做到！

app.on('ready', function () {
    var mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })
    
    mainWindow.loadURL('file://' + __dirname + '/index.html')
    
    /* 不加任何参数，可以在本窗口内打开dev tool */
    /* mainWindow.webContents.openDevTools() */
    /* 加上参数，可以在新窗口中打开dev tool */
    mainWindow.webContents.openDevTools({detach: true})
})

重启程序就可以在 dev tool 中看到报错了。
Uncaught ReferenceError: $ is not defined

查到正确的引入方法应该是：

<html>
    <head>
        <meta charset="UTF-8">
        <title>electron-quick-start</title>
    </head>
    <body>
        <div class="main"></div>
    </body>
    <script>var $ = require('./jquery-2.1.4.min.js')</script>
    <script>require('./app.js')</script>
</html>

原因：

看一下 jquery 源码：

if ( typeof module === "object" && typeof module.exports === "object" ) {
  /* 把jQuery挂到`module`对象下 */
} else {
  /* 把jQuery挂到`window`对象下 */
}

在 app.js 里面简单 console.log 一下可以知道，module 和module.exports 都已经定义，所以 jQuery 挂到了 module 对象下，而不是全局的 window.$ 或 window.jQuery 。

读取本地文件内容

之前 loadURL 方法可以帮我们直接在浏览器中打开本地 html 文件。由于有 nodeJS 的加持，我们还能直接读取本地文件的内容。

html 中加一个 fileContent 。

<html>
    <head>
        <meta charset="UTF-8">
        <title>electron-quick-start</title>
    </head>
    <body>
        <div class="main"></div>
        <div class="fileContent"></div>
    </body>
    <script>var $ = require('./jquery-2.1.4.min.js')</script>
    <script>require('./app.js')</script>
</html>

app.js 中使用 nodeJS 的 API，读取 package.json 文件内容：

var fs = require('fs')
var pckJson = fs.readFileSync('./package.json', 'utf8')
$('.fileContent').text(pckJson)

能做到这一点，就代表我们可以在 app 本地写一些数据来使用了。

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…