【打工日记】Go后端开发，零经验2天开发electron应用

by 老麦

无关废话

标题先取了，文章等周末来补充。。。标题先取了，文章等周末来补充。。。标题先取了，文章等周末来补充。。。

三个周末过去了，今天在舍友的提醒下，终于来更新了，果然这种倒逼法，还是有点效果的，话不多说进入正题

背景

这几天突然接到一个需求，需要做一个windows桌面程序，功能很简单，就是登录用户账号，便捷打开公司的共享文件夹。但是我是一个后端go开发程序员呀，一点没接触过开发桌面程序，这可是前端的活。那怎么办呀，没活怎么硬整啦。

一、技术选型

每个新项目的诞生都离不开这个环节，因为我的舍友是做前端的，之前就经常听到他用electron开发桌面应用，然后他的生态和社区都还可以，后期维护和迭代新功能，用起来也有人可以问，比较好维护

然后我们公司前端用的是vue，我就去GitHub搜了一下electron-vue还真有

我们公司前端还用element-ui框架，为了加快开发速度和后续迭代便利性，就引入了这个框架，故最后使用的技术如下

• electron
• element-ui 2.12
• electron-vue

相关版本

开发时，相关的一些版本记录一下，因为electron-vue在2023-10-04，作者已经把这个项目暂停了，免得以后迭代，版本对不上导致出现一些问题

• npm: '8.19.4'
• node: '16.20.1'
• electron：'2.0.18'
• electron-builder：'^20.19.2'
• electron-updater：'^3.1.2'

二、开始整活

1. 脚手架安装：electron-vue#getting-started

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

2. 安装element2.12依赖

npm install element-ui@2.12.0

3. 面向GPT开发！

三、踩坑和其他

相关命令

# 安装依赖
npm install

# 本地调式
npm run dev

# 构建应用
npm run build
（构建完成再build目录下，会生成安装文件）

打包和更新说明

打包文件和上传说明

当你运行npm run build之后，会再build文件夹生成以下三个文件，需要上传到远端服务器

• latest.yml：最近版本信息（含版本号，是否更新看版本号，不可以逆着来），如下
• xxx-share-file Setup 0.0.1.exe：安装程序
• xxx-share-file Setup 0.0.1.exe.blockmap：文件是一个二进制文件，其中包含应用程序各个文件的哈希值和大小信息

假设上传到，http://127.0.0.1:8000 以下两个文件要对应修改

• package.json

// package.json
{
  "build": {
    "publish": [
      {
        /// ...
        "url": "http://127.0.0.1:8000/"
        /// ...
      }
    ]
  }
}

• src/main/index.js

function checkAppUpdate(){
    // 设置更新检查的URL
    autoUpdater.setFeedURL("http://127.0.0.1:8000/")
    /// ...
}

更新逻辑说明

应用程序，会去【更新检查URL】拉取latest.yml文件，根据latest.yml记录的信息，进行更新

当版本号变动，如应用是0.0.1，线上latest.yml文件是0.0.2，就会提示更新

（这里有个小问题，当你点不更新，然后又直接关闭应用，还是会触发更新，目前暂未解决）

踩坑集合

1. 代码无签名，估计被当病毒直接删除

• 当直接上传exe安装文件到共享文件夹，再到所属主机，去直接执行安装，会意外被该主机系统直接删除掉
• 解决方法：把exe安装文件压缩后上传，再解压安装文件到桌面，再安装即可成功安装

2. 请求公司验证登录接口，发现跨域问题

Failed to load http:xxx/?c=user&a=checkLogin: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access.

• 将 webSecurity 设为 false 后,CORS 将被禁用
• 请注意，此操作将会禁用一些其他的安全特性，例如同源政策(SOP)，这可能会为你的应用带来潜在的安全风险。如果你完全清楚这些风险并接受它们，可以禁用它
• 但是，在生产环境中，最好不要禁用 webSecurity（因为我们是内部应用，这个就没关系了）

function createWindow() {
    mainWindow = new BrowserWindow({
        // ...代码省略
        webPreferences: {
            webSecurity: false
        }
        // ...代码省略
    })
}

3. 引入'electron-updater'，一直报错

一开始安装的最新版本的，后面换成了3.1.2

{
  "electron-updater": "^3.1.2"
}

4. 调试模式下，版本号获取的不是应用的版本号，而是electron本身的版本号，会导致判断是否更新异常

https://blog.csdn.net/Wonder233/article/details/103730365

这文章有说明，但文章较为久远，解决方式还得继续找，不过问题不大，只影响调试模式，后续再解决

5. 打包应用未生成latest.yml

原因：package.json文件的 build 字段下缺失 publish 数据

// package.json
{
  "build": {
     // ...
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8000/"
      }
    ]
    /// ...
  }
}

6. 生成的安装文件名带空格，对linux不友好，提供下载链接会出问题

加一下artifactName，如下

// package.json
"build": {
    //...
    "win": {
      "icon": "build/icons/icon.ico",
      "artifactName": "${productName}_Setup_${version}.${ext}"
    },
    //...
}

本文由 mdnice 多平台发布