本人初学Electron,把学习的过程记录了下来,以免以后忘记:
Electron笔记一:安装
Electron笔记二:http与websock的实现
Electron笔记三:调用外部程序(子进程管理)
Electron笔记四:Dll的调用
Electron笔记五:无需控件,HTML5直接播放rtsp(摄像头)
Electron笔记六:打包成可执行程序(.exe)
1.安装node.js
从node.js官网下载 推荐下载LTS版本(当前为14.17.3), 默认安装即可.不清楚可按https://www.cnblogs.com/liuqiyun/p/8133904.html 安装配置即可。
2、安装Electron
在cmd命令行,输入node -v,查看node.js是否安装成功,安装 npm镜像,使用该命令进行安装
npm install -g electron-prebuilt
因网络原因,可能安装失败,可切换到国内淘宝镜像
npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm install -g electron
-g 表全局安装,如果不想全局安装,请加--save-dev参数
cnpm install -g electron --save-dev 安装当前项目中
【npm安装模块】
npm install xxx //利用 npm 安装xxx模块到当前命令行所在目录
npm install -g xxx //利用npm安装全局模块xxx
【本地安装】时将模块写入package.json中:
npm install xxx //安装但不写入package.json
npm install xxx –-save //安装并写入package.json的”dependencies”中
npm install xxx -–save-dev //安装并写入package.json的”devDependencies”中
【npm 删除模块】
npm uninstall xxx //删除xxx模块
npm uninstall -g xxx //删除全局模块xxx
如果NPM install -save 和 -save-dev 傻傻分不清,请看https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html
查看版本
3.安装编译环境
在cmd中, 执行指令:
npm install -g windows-build-tools
这个步骤将安装python2.7和msbuild等内容.
4.设置环境变量
在cmd中, 执行指令:第一句指令, 指定了使用python2.7作为编译环境(在上一步中已经安装), electron并不支持python3.x.
npm config set python python2.7
npm config set msvs_version 2017 或 npm config set msvs_version 2019
第二句指令, 指定了使用项目使用的msvs版本.
这些设置后保存在文件C:\Users\Administrator\.npmrc中
如果你的电脑中安装了VS, 需要把VS的MSBuild.exe添加到环境变量中, 具体步骤为:
右键我的电脑->属性->高级系统设置->环境变量->系统变量->编辑->新建->添加vs的MSBuild.exe目录:
"你的vs安装目录"\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin
5.新建项目
快速模板:在官网下载程序demo,https://github.com/electron/electron-quick-start
在cmd下进入该项目路径,输入
npm install
npm start
即可运行该项目
如果重头配置可以这样
执行指令:
npm init -y
这一步我们使用npm初始化了项目, 并自动在项目根目录建立了一个package.json文件, 这里我们暂时不管这个文件, 稍后再对它进行配置.
还有一种方法快速建项目安装electron-forge,这是一个脚手架工具,类似于Vue-cli。
然后我们初始化一个项目,项目名称为my-new-project
npm install -g electron-forge
electron-forge init my-new-project
cd my-new-project
electron-forge start
a.修改package.json
内容如下:
{
"name": "blogs",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "chcp 65001 && electron main.js"
},
"keywords": [],
"author": "jyb",
"license": "ISC",
"devDependencies": {
"electron": "^13.1.7"
}
}
为防止日志中文输出乱码,加上chcp 65001
b.添加main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
c.添加index.html
在上一步的main.js中, 我们指定加载了一个html文件, 这个html文件, 就是程序的主页面.
在项目根目录下, 新建一个html目录,用于存放与前端有关的内容, 在html目录下, 创建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>
npm start 运行即可看到效果