electron 构建桌面应用

最新推荐文章于 2024-08-16 12:00:02 发布

2401_84150137

最新推荐文章于 2024-08-16 12:00:02 发布

阅读量392

点赞数 3

分类专栏：程序员文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/2401_84150137/article/details/137663449

版权

程序员专栏收录该内容

97 篇文章 0 订阅

订阅专栏

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
更多学习资源请关注我的新浪微博…
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。