zl程序教程

您现在的位置是:首页 >  其他

当前栏目

(3/3)Electron知识学习 · 基础篇

基础学习 知识 electron
2023-06-13 09:16:38 时间

控制台中文乱码

由于我们可能会用到控制打印中文

出现乱码的情况我们需要进行设置

在package.json中运行指令之前加入编码识别

chcp 65001

创建桌面快捷键

首先安装依赖

npm install electron-squirrel-startup --save

然后在main.js顶部加入代码

if(require('electron-squirrel-startup')) return;

自动更新

electron自动更新模块

我们需要自行对其开发

首先在main.js中加入如下代码

其中代码可以自动识别当前系统版本并发送更新请求

//自动更新
const { autoUpdater, dialog } = require('electron')

const server = 'http://localhost'
const url = `${server}/update?platform=${process.platform}&version=${app.getVersion()}`
console.info("自动更新地址",url)
autoUpdater.setFeedURL({ url })

//设置每隔一段时间检测更新
setInterval(() = {
  autoUpdater.checkForUpdates()
}, 60000)

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) = {
  const dialogOpts = {
    type: 'info',
    buttons: ['重启', '稍后'],
    title: '应用自动更新',
    message: process.platform === 'win32' ? releaseNotes : releaseName,
    detail: '你有新的版本需要更新',
  }

  dialog.showMessageBox(dialogOpts).then((returnValue) = {
    if (returnValue.response === 0) autoUpdater.quitAndInstall()
  })
})

autoUpdater.on('error', (message) = {
  alert("自动更新失败")
  alert(message)
  console.error('自动更新失败')
  console.error(message)
})

当更新检测时需要去请求网络接口

当请求到我们的接口根据请求的信息自动接口判断然后给到客户端更新说明等信息

然后让其下载并更新安装

打包发布-forge

当我们程序开发完成后我们需要对其打包发布以便于用户安装使用

引入依赖

首先我们需要引入打包依赖

这里我们使用的electron-forge打包工具

将 Electron Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架

执行完成后我们可以看到package.json发生了一些变化

首先是启动脚本发生变化

而是依赖脚本

以及打包的路径

npm install --save-dev @electron-forge/cli
npx electron-forge import

温馨提示

这里如果你本地电脑nodejs版本过低会报错

升级最新的nodejs稳定版即可

编译打包

使用 Forge 的 make 命令来创建可分发的应用程序

npm run make

温馨提示

由于执行npm run make打包是报错

发现打包路径不能是中文

所以我重新命名文件后就打包成功了

打包成功后在项目根目录中out文件夹中有两个文件夹

第一个make是打包后可执行程序

第二个是编译后的可执行程序

可自行打包

其他设置

软件图标

package.json

config->forge

"packagerConfig": {
    "icon": "img/boss.ico"
 }

设置完成后启动查看

图标就应用成功了