Electron入门笔记（一）-自己快速搭建一个app demo

Electron学习-快速搭建app demo

作者：狐狸家的鱼

Github：八至

一.安装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,还在摸索中，有不足可以指点一二哈。