Electron开发桌面应用

wangfpp
1,205 阅读4分钟

公众号：暮北林
Q Q 群 : 一起学前端
使用Electron开发桌面应用

Electron是什么能做什么?

Eletron可以让开发者使用Javascript HTML CSS来进行桌面应用的开发,而且是跨平台的MAC Linux Windows都可以使用
    1. 减少了开发的难度 不需要C# QT只需要基本的HTML就可以
    • 1.1 实际是把Chrome内核打包负责渲染HTML
    1. 降低了维护成本 跨平台可以一套代码多端使用
    1. 社区活跃度高 而且Electron已经加入了OpenJS基金会
    1. 不足点：
    • 4.1 打包体积大
    • 4.2 Windows需要各种重新编译 如Sqlite等
    • 4.3 安装界面简陋 需要学习NSI DUI等进行界面美化 Electron官网 www.electronjs.org/

我做的Electron项目

目前做的有几个简单的基于React的AI识别数据展示的项目 还有一个是带Server的项目 今天就总结下这个项目的开发过程和遇到的问题

### 项目简介 1. 此项目是一个根据创建的课程及上传课程的视频利用硬件设备对视频的内容进行AI分析,后续进行报表展示以及对数据进行修改的工具 2. 使用的技术 ```markdown // Electron相关 1. electron-builder 进行项目打包 2. electron-updater 更新

// Server端

  1. node + Express进行服务搭建
  2. Sqlite3 进行数据存储
  3. multer 视频的上传 Express的插件
  4. FFMPEG进行视频封面的截取
  5. log4js 日志记录

// Web/前端部分

  1. React + Redux + React-router-dom
  2. Antd // UI库
  3. Axios // 数据通信
  4. Bizcharts // 图表绘制数据展示
  5. html2canvas // PDF导出
  6. zk-draw // 自己封装的绘制Canvas的库 zonkey-draw zonkey北京中庆

// 项目打包

  1. Shell //使用shell脚本将React Electron打包集中处理
### 项目目录结构
```markdown
.
├── build　#Ｒeact打包
├── dist　# Electron 打包
├── FOLDER.md # 目录结构说明
├── main　# 主进程代码
├── node_modules # 依赖项
├── package.json
├── package-lock.json
├── public　# 公用文件
├── README.md # 项目说明文件
├── release.sh # 打包脚本
├── resources # ICONS文件
├── service # DB和服务代码
├── src # Web目录
└── yarn.lock

8 directories, 6 files

遇到的问题

1. windows上Sqlite3需要重新编译
2. FFMPEG打包后的路径问题
3. 获取本机IP
4. Server上传文件的保存路径问题
5. Windows X86和X64的问题以及windows10与windows7的兼容性问题
1. windows的Sqlite3编译问题
问题描述:
    安装依赖时在windows需要对Sqlite3重新编译一直报错说是python和vs studio的依赖问题导致编译不成功

解决方案:
    管理员权限运行cmd安装windows-build-tools
    npm install --global --production windows-build-tools
    https://www.npmjs.com/package/windows-build-tools
之后install安装依赖  build打包一路通畅

2.FFMPEG的路径问题

问题描述:
   使用的是fluent-ffmpeg开发环境正常打包就无法使用ffmpeg报错路径不对
   在打包的时候去除asar的压缩就可以找到路径

解决方法 去未打包的asar文件中找路径
// FFMPEG
const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('ffmpeg-static').replace(
    'app.asar',
    'app.asar.unpacked'
);
const ffprobePath = require('ffprobe-static').path.replace(
    'app.asar',
    'app.asar.unpacked'
);
ffmpeg.setFfmpegPath(ffmpegPath);
ffmpeg.setFfprobePath(ffprobePath);

3.获取本机IP问题

问题描述:
    使用node的os模块获取的active ip总会有虚拟网卡的ip导致ip地址获取错误
/**
* @description 获取本机IP
*/
localIp: _ => {
   let netDict = os.networkInterfaces();
   for (const devName in netDict) {
      let netList = netDict[devName];
      for (var i = 0; i < netList.length; i++) {
          let { address, family, internal, mac }= netList[i],
          isvm = isVmNetwork(mac);
         // 这样判断的ip地址会获取到虚拟网卡的ip会导致真实的ip地址获取错误
          if (family === 'IPv4' && address !== '127.0.0.1' && !internal) {
             return address;
          }
     }
  }
}

解决方法1:
    通过mac地址来判断是否为虚拟网卡进行排除
const isVmNetwork = mac => {
    // 常见的虚拟网卡MAC地址和厂商
    let vmNetwork = [
        "00:05:69", //vmware1
        "00:0C:29", //vmware2
        "00:50:56", //vmware3
        "00:1C:42", //parallels1
        "00:03:FF", //microsoft virtual pc
        "00:0F:4B", //virtual iron 4
        "00:16:3E", //red hat xen , oracle vm , xen source, novell xen
        "08:00:27", //virtualbox
    ]
    for (let i = 0; i < vmNetwork.length; i++) {
        let mac_per = vmNetwork[i];
        if (mac.startsWith(mac_per)) {
            return true
        }
    }
    return false;
}

解决方法2:
    通过广播的方式获取本机ip

4.Server的文件保存问题

问题描述:
    应用程序可以装在D E等磁盘分区但是upload file只能保存在C盘  导致C盘空间不足,这个问题一直没有得到有效的解决

5.Windows的应用程序兼容性

问题描述:
    打包的32版本无法运行在64位系统上 windows10和windows7的兼容性问题
    
解决方法:
    打包时同时打包了32&64的包
     "win": {
      "icon": "./resources/icons/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32",
            "x64"
          ]
        }
      ]
    }
在Windows7上右键打开应用的兼容性即可在windows7上运行

贴一下客户端的最终样子吧

查阅的资料

区分虚拟网卡 www.cnblogs.com/findumars/p…
Electron www.electronjs.org/docs
node nodejs.cn/api/
Electron-builder www.electron.build/ 钉钉Linux版 github.com/nashaofu/di…

写在最后

Electron确实能够方便的开发左面应用,只需一套代码可以兼顾Web和Desktop两端的应用, 只需进行判断运行的环境做到功能取舍就行 打算从头一步一步写一下Electron的开发来着,却有感觉无从下手😈

1. 基本的思路是基于基本的HTML来说明Electron的开发环境搭建
2. 基于React前端框架和Electron进行快速开发
3. 在之前的基础上加入Server的功能集成在Electron中使其功能更加丰富
4. 如何制作一个精美的安装界面
avatar
文章
阅读
粉丝