electron的入门学习

来源：互联网发布：要开淘宝网店怎么弄编辑：程序博客网时间：2024/05/17 18:24

这个electron的入门学习玩得我心累呀，一开始各种无法下载electron模块，这样还能玩吗？被虐了几个小时之后终于是完成了。但是还没打包成一个exe应用，这里后面再补。在这里总结一下为什么我会无法安装模块的错误。

一开始我直接在任意一个目录位置上直接就npm init，npm install。最后发现根本上什么模块都没有导入进来。之后使用express来创建一个工程，之后就没有出现模块的无法导入的问题了。在这里我认为是因为不使用express来初始化整个文件夹的环境就导致npm install无法找到nodejs上的源文件的路径，所以导入的时候是出错了。所以一直无法导入模块。说完了错误，就来说一下如何写一个简单的hello world 的桌面程序吧！

===========start======================

首先要使用express -t ejs app来创建一个名字为app的文件夹。
之后就是npm install把所要用到的模块都载入进来。
然后我们需要安装electron-prubuilt包。可以通过命令npm install --saved-dev electron-prebuilt进行安装。

在这里如果无法安装成功electron-prubuilt包，那么就有可能是网络问题，这个可以百度来解决我就不去说明了。

安装完成之后，我们就可以在本地上找到./node_modules/.bin/electron的一个window命令脚本，然后打开，就会出现下面的图：

将app整个文件夹来如粉红色的框框内就会弹出下面的图：

这个就是我们所要的效果了，看起来是不是和桌面的应用程序非常像呢？

这里主要用到三个文件：

index.html:

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Hello World!</title>  </head>  <body>    <h1>Hello World!</h1>    We are using node <script>document.write(process.versions.node)</script>,    Chrome <script>document.write(process.versions.chrome)</script>,    and Electron <script>document.write(process.versions.electron)</script>.  </body></html>

main.js:

const electron = require('electron');const { app } = electron;const { BrowserWindow } = electron;let win;function createWindow() {  // 创建窗口并加载页面  win = new BrowserWindow({width: 800, height: 600});  win.loadURL(`file://${__dirname}/index.html`);  // 打开窗口的调试工具  win.webContents.openDevTools();  // 窗口关闭的监听  win.on('closed', () => {    win = null;  });}app.on('ready', createWindow);app.on('window-all-closed', () => {  if (process.platform !== 'darwin') {    app.quit();  }});app.on('activate', () => {  if (win === null) {    createWindow();  }});

package.json:

{  "name": "app",  "version": "0.0.0",  "private": true,  "main": "main.js",  "scripts": {    "start": "electron .",    "packager": "electron-packager ./ HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"  },  "dependencies": {    "body-parser": "~1.15.2",    "cookie-parser": "~1.4.3",    "debug": "~2.2.0",    "express": "~4.14.0",    "jade": "~1.11.0",    "morgan": "~1.7.0",    "serve-favicon": "~2.3.0"  },  "devDependencies": {    "electron-packager": "^8.5.2",    "electron-prebuilt": "^1.4.13"  }}

主要文件就是这几个，环境也配置好了。

之后就是打包文件。

首先在项目根目录下面的 package.json 里添加代码，
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

上面的代码./是文件夹所在的路径，这个要写自己的文件夹路径。

然后npm run-script packager

就可以了。

具体流程图：

为了避免源代码的暴露出来，我们要将其打包为asar文件。

这里如果你没有安装asar模块的话，可以看一下这篇文章（传送门）

安装好模块后就进行打包文件了。首先找到你要打包的文件路径

例如我的是在D:\nodejsCode\app\OutApp\HelloWorld-win32-x64\resources\app文件夹这个路径。这里我就是要将app这个文件夹的内容封装起来。

看图所示：

这样子桌面应用就大功告成了。

0 0