标签：electron state item Electron mainWindow 下载 webContents

内容持续更新，请查看个人网站

Electron

主进程和渲染进程

在桌面端应用中，进程分为主进程和渲染进程。

以 electron + vue 为例：

• 采用发布订阅模式，主进程通过 ipcMain.on 接收渲染进程发送的事件, 通过 mainWindow.webContents.send 发送事件
• vue入口文件中通过 ipcRenderer.send发送该事件 ，ipcRenderer.on接收事件

localStorage,sessionStroge 存储如何实现？

目前还没找到好的解决办法，下面几种解决方式

• 采用状态管理系统，类似于 vuex
• 第三方库 electron-localStorage
• 重写方法，以读写文件的形式存储信息，主进程和渲染进程交互，将存储信息以 json文件形式保存本地，曲线救国的方式（推荐）

首次安装或打包失败？

说实话electron这个问题困扰了很久（主要是懒）
在公司里也有项目，也已经配好了运行及打包环境，
但是在自己的电脑上因为网络的原因，没能够运行起来。
下面记录一下我踩过的坑

1. 关于electron首次运行及打包时需下载文件，但由于没法科学上网的原因，导致经常下载失败，还好有万能的淘宝
2. 下面隆重介绍

项目根目录下新建.npmrc文件 分别配置运行时下载的electron包和打包时所需的包，使用淘宝源下载（亲测有效）
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

如果您想自定义electron 的安装位置
项目根目录新建install.nsh文件：

!macro preInit SetRegView 64 WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\Users\Administrator\AppData\szlims_winapp" WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\Users\Administrator\AppData\szlims_winapp" SetRegView 32 WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\Users\Administrator\AppData\szlims_winapp" WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\Users\Administrator\AppData\szlims_winapp" !macroend

package.json 增加 nsis:{"include": "./install.nsh"}

如果项目里引入了dll文件
package.json build:{ "extraResources": { "from": "要打包的路径", "to": "打包到哪里" },}

如何设置开发者调试工具？

mainWindow.webContents.openDevTools();

如何监听文件下载进度？

也是采用发布订阅模式

mainWindow.webContents.session.on(
    "will-download",
    (event, item, webContents) => {
      // 去除这里可以自定义保存位置
      // const filePath = path.join(app.getPath("downloads"), item.getFilename());
      // item.setSavePath(filePath);

      item.on("updated", (event, state) => {
        // 计算当前下载的进度
        num = ((item.getReceivedBytes() / item.getTotalBytes()) * 100).toFixed(
          2
        );
        if (state === "progressing") {
          mainWindow.webContents.send("getScheduleEvent", [
            num,
            item.getSavePath(),
          ]);
          if (item.isPaused()) {
          } else {
            
          }
        } else if (state === "interrupted") {
          console.log("终止下载");
        }
      });
      item.on("done", (event, state) => {
        if (state === "completed") {
          mainWindow.webContents.send("getScheduleEvent", [
            "下载成功",
              // 发送当前保存的位置
            item.getSavePath(),
          ]);
        } else if (state === "cancelled") {
          mainWindow.webContents.send("getScheduleEvent", [
            "取消下载",
            item.getSavePath(),
          ]);
        } else {
          //...
        }
      });
    }
  );

结语：

目前还是刚入门electron的小白，在这里推荐几个地址：

苏南大叔博客

Electron官方文档

标签：electron,state,item,Electron,mainWindow,下载,webContents
来源： https://blog.csdn.net/liRemons/article/details/113767945

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。