UEditor的word图片转存-Electron篇

electorn是用nodejs写桌面端应用，详细的可从官方文档上获得：Electron文档

完整的应用地址为：Word-Image-Handler

在这里需要实现如下几点：

1.在子进程中跑nodejs服务

2.实现自动更新

3.可唤起

Nodejs服务

因为，我这里需要跑一个nodejs应用，跑在子进程中，直接上一个大神的项目地址：Electron-with-expres

这个项目就是Express跑在electron创的子进程中，在express中增加需要的get,post响应，乏善可陈。

这里用的electron-packager工具打包，最终打包出一个绿色版应用，如果想要一步到位打包成一个可安装的文件，需要使用electron-builder工具

npm install electron-builder --save-dev

然后，可以直接使用electron-builder命令打包，可将其写入scripts中

"scripts": {    

        "start": ".\\node_modules\\node\\bin\\node.exe start-electron.js",    

        "dist": "electron-builder --win --x64"  

}

但是，直接使用electron-builder打包后的应用安装后，会提示express模块不存在，是因为express的依赖模块没被打包进去，可以在extraResources配置中（package.json的build节点下）将node_modules打包进去，from对应的根目录，to对应的是win-unpacked->resources

"extraResources": [

      {

        "from": "./express-app/node_modules",

        "to": "./node_modules"

      }

    ],

至此，可以成功跑起来应用，

自动更新

接下来至少要实现自动更新功能，自动更新使用electron-updater工具

npm install electron-updater --save

在主渲染进程中加入如下代码

main.js

ipcMain.on('update', (e, arg) => {  
        checkForUpdate()
})

function sendUpdateMessage (message, data) {

  console.log('sendMsg:', {message, data})

  mainWindow.webContents.send('message', { message, data })

}

let checkForUpdate = () => {

  autoUpdater.setFeedURL(feedUrl)

  autoUpdater.on('error', (e, message) => {

    sendUpdateMessage('error', message)

  })

  autoUpdater.on('checking-for-update', (e, message) => {

    sendUpdateMessage('checking-for-update', message)

  })

  autoUpdater.on('update-available', (e, message) => {

    sendUpdateMessage('update-available', message)

  })

  autoUpdater.on('update-not-available', (e, message) => {

    sendUpdateMessage('update-not-available', message)

  })

  autoUpdater.on('download-progress', (e, message) => {

    sendUpdateMessage('download-progress', message)

  })

  autoUpdater.on('update-downloaded', (e, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {

    sendUpdateMessage('isUpdateNow')

    ipcMain.on('updateNow', (e, message) => {

      autoUpdater.quitAndInstall()

    })

  })

  autoUpdater.checkForUpdates()

}

在这里在主进程监听到检测更新的消息后，主要做的是

1.设置服务器地址feedUrl，该地址是更新包和更新信息文件（latest.yml）所在目录地址如： http://xxx/downloadDir/

其中，autoUpdater

const { autoUpdater } = require('electron-updater')

2.监听更新，下载等消息，做相应处理，这里是会发送对应消息，然后，在渲染进程中监听到后做相应处理。

在渲染进程中，需要发送检查的消息，监听更新好后发的isUpdateNow消息。

index.html

ipcRenderer.on('message',(event,{message,data}) => {

          console.log('message', { message, data})

          if (message === 'isUpdateNow') {

              if (confirm('Do you want to update now?')) {

                  ipcRenderer.send('updateNow');

              }

          }

      });

在渲染进程完成渲染，并且子进程已经运行成功后，发送update消息，设置autoUpdate参数

ipcRenderer.send('update')

唤起

当用户需要使用改应用时，可以快捷唤起，而不需要用户找到桌面图标，点击打开。

唤起其实是注册一个自定义协议如：WIH，使用链接 wih://，即可唤起应用

在main.js中加入：

app.setAsDefaultProtocolClient('WIH')

此时，应用可以唤起，但是，可以唤起多个应用，我们希望只保留一个实例，需要使用独占锁的方式来控制

main.js

const gotTheLock = app.requestSingleInstanceLock()

if(!gotTheLock){

  app.quit()

} else {

  app.on('second-instance', e =>{

    if(mainWindow){

      mainWindow.focus()

    }

  })

}