<强>前言
之前写过一篇关于Windows下通过电子自带的自动实现应用自动更新的文章,很多小伙伴私信问我要具体实现代码,不过因为之前一直很忙(还有懒……)。
这两周正好周末比较空,除了在github上搭建了一个脚手架,还顺便把实现优化了一波,下面将会带着大家从零开始详细介绍实现过程,对小白也很友好的教程哦。
<强>从零开始
进入你的工作目录,比如d/工作区
#目录d/工作区
mkdir electron-demo #新建文件夹electron-demo
cd electron-demo #进入文件夹electron-demo
npm init #初始化npm,一路回车即可
npm我电子——save-dev #安装电子依赖
主要联系。js #新建文件main.js
触摸指数。html #新建文件index . html
之前
现在你的文件结构如下:
| - electron-demo
| - - -主要。js #空文件
| -指数。html #空文件
| - package.json
| - package-lock。json # npm自动生成的文件
| - node_modules
之前
确保包。json的名称、版本、描述这三个字段都不为空,主要字段的取值为主要。js。
{
“名称”:“electron-demo”,
“版本”:“0.0.1”,
“描述”:“electron-demo”,
“主要”:“main.js”
}
之前
<强>主进程和渲染进程
电子应用分为主进程和渲染进程。渲染进程是直接与用户产生交互的进程,也就是我们看到的一个个窗口页面,而主进程主要负责控制应用的生命周期,负责各个渲染进程的通信等。
我们的主进程代码写在主。js中,所以首先在你心爱的代码编辑中打开主要。js,输入如下代码:
const path=要求(“路径”);
const url=要求(url);
const {
应用程序,
BrowserWindow
}=要求(“电子”);
app.on(“准备好”,()=比;{
让赢=new BrowserWindow ({
宽度:800年,
身高:600,
webPreferences: {
devTools:真
}
});
win.loadURL (
url.format ({
路径名:路径。加入(__dirname index . html),
协议:“文件:”,
斜杠:真
})
）;
});
app.on (window-all-closed,()=比;app.quit ());
之前
再打开指数。html、输入如下代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Hello World ! & lt;/title>
& lt;/head>
& lt; body>
& lt; h2> Hello World ! & lt;/h2>
& lt;/body>
& lt;/html>
之后执行
#目录d/workspace/electron-demo
node_modules/in/电子。
不出意外的话你会看到一个弹出框,像这样:
,
我们也可以把node_modules/in/电子。保存成npm脚本,方便以后调用。打开包。json,添加如下内容:
"脚本":{
“开始”:“电子。”
}
以后只需要调用npm开始即可。
到这里,我们已经有了一个最简单的电子应用,如果你对继续开发应用本身更感兴趣的话,请移步电子官方文档,因为接下来我们会专注在怎么让这个应用实现自动更新。
<>强自动更新
<>强安装依赖
自动更新功能的实现依赖electron-builder和electron-updater,所以我们需要先安装这两个依赖。
#目录d/workspace/electron-demo
npm我electron-builder——save-dev #必须安装为开发依赖,否则打包会出的错
npm我electron-updater——拯救#必须安装为运行依赖,否则运行会出错
<>强配置包。json
为了配合打包的包。json需要新增字段构建:
“构建”:{
:“appId com.xxx.app”,
“发布”:(
{
“提供者”:“通用”,
“url”:“http://127.0.0.1:8080”
}
]
}，
