一.安装Node
1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装。
2.然后cmd进入命令窗口,输入npm -v查看node当前版本,
二.创建文件并初始化
1.在自己喜欢的盘里新建项目文件,我是 E:\Electron\resources\app,在此文件目录app下打开命令窗口,按住shift ,右击空白处,选择在此处打开powershell命令窗口
2.在命令窗口输入:npm init,然后一直回车,直到package.json文件完成
3.在VS code中打开项目文件,新建Index.html 和mian.js,并将json文件中的主进程配置成:"main":"main.js"
4.在项目文件下安装electron :npm install electron,不建议全局安装,不使用npm install electron -g
5.在main.js文件中写入如下代码:
/******************** ** main.js文件内容 ** ********************/ // 导入electron模块 const electron = require('electron') // 应用生命控制app const app = electron.app // 创建一个原生浏览器窗口 const BrowserWindow = electron.BrowserWindow // 引入path和URL模块 const path = require('path') const url = require('url') // 保持对窗口对象的全局引用 // 否则,窗口对象会在JS对象垃圾回收时自动关闭 let mainWindow function createWindow () { // 创建浏览窗口 mainWindow = new BrowserWindow({width: 800, height: 600}) // 加载app的index.html文件 mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools.打开开发者工具DevTools // mainWindow.webContents.openDevTools() // Emitted when the window is closed. 当窗口被关闭时,触发此事件 mainWindow.on('closed', function () { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 mainWindow = null }) } // Electron初始化完成,并准备好创建浏览窗口之后 // 调用函数createWindow // 一些API也只有在此事件(ready)触发之后才能使用 app.on('ready', createWindow) // 当所有窗口被关闭时,即事件window-all-closed被触发后,退出程序 app.on('window-all-closed', function () { // 对于MacOS用户,往往需要使用command+q完全退出程序 // 否则,绝大部分其菜单栏会保持激活状态。即程序并未完全退出。 // 对于非Darwin平台来讲,如Windows,则直接退出程序 if (process.platform !== 'darwin') { app.quit() } }) // 若程序activate事件被触发时,执行该操作,创建一个新窗口 app.on('activate', function () { // 在Mac系统中,若其他窗口都已关闭,点击dock面板上的程序图标时 // 会重新创建一个窗口 if (mainWindow === null) { createWindow() } }) // 在这文件,你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件,然后用 require 导入
6.index.html写入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <!-- 再次渲染进程中,你可以使用任何Node.js的API --> We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> <script> // 同样的,你也可以在此进程中引入其他文件 require('./renderer.js') </script> </html>
7.局部安装要在.\node_modules\.bin\目录下运行命令electron. 全局安装就在根目录文件下运行electron.
8.应用程序打包,详情可以参考官方
9.如果想要让app代码不可见,可进行压缩,具体也可看官方文档进行操作
也是第一次了解学习Electron,还在摸索中,有不足可以指点一二哈。