Electron-vue开发实战（总集篇Ⅰ）| Hexo-Manager开发阶段性总结与下一步计划

到现在，我的Hexo-Manager开发出了第一版 0.0.1-alpha，并在github上pre-release了。尽管功能很简陋，但还是具备一定实用性，并且学习到了许多知识。本文只在对目前的开发进度进行总结，对一些原理进行记录，并对未来工作的思考进行一些记录。

Hexo-Manager 0.0.1-alpha⁍

banner

Hexo-Manager是一个Windows平台的针对Hexo博客进行可视化管理的软件

运行环境⁍

Windows

下载、安装和配置⁍

到release页面里下载setup文件，双击安装点击右上角的设置按钮，对于你的Hexo根目录进行配置，例如 C:\hexoBlog

这里有问题，在dev的环境下可以输入C:\\hexoBlog转义，也可以直接输入C:\hexoBlog，但是在打包后，只能输入C:\hexoBlog，不能加转义字符

开发环境⁍

Electron-Vue框架
NodeJS: v16.8.0

主要功能⁍

点击“打开”，选择文件，用系统默认的编辑器打开
点击“新建”，输入文章名称，新建hexo文章，并用系统默认的编辑器打开
点击“一键部署”，执行 hexo clean && hexo deploy。生成站点文件并推送至远程库。

可能存在的问题⁍

未进行错误处理和异常处理以及日志输出会在接下来的版本里继续研发，请试用的朋友一定 先配置根目录

主要功能开发记录⁍

安装⁍

这两篇文章主要介绍了环境的配置与安装，我中途将NodeJS的环境统一到了16.8.0，建议主要环境看第二篇，具体细节看第一篇

调试⁍

主进程调试： Post not found: Electron-vue开发实战（四）| VSCODE调试主进程
渲染进程调试：Vue_dev_tools的安装见 Post not found: Electron-vue开发实战（一）| 入门与安装

主窗口⁍

窗口设置⁍

程序入口以及窗口设置见 Post not found: Electron-vue开发实战（二）| Main进程开发

// src/main/index.js
function createWindow () {
  // 创建窗口
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 500,
    useContentSize: true,
    width: 720,
    title: 'Hexo-Manager',
    center: true,
    frame: false,
    titleBarStyle: 'hidden',
    resizable: false,
    backgroundColor: '#F2F2F2',
    show: false, // 漏了这个
    // alwaysOnTop: true,

    webPreferences: {
      // 开启node
      nodeIntegration: true,
      contextIsolation: false,
      // 开启remote
      enableRemoteModule: true
    }
  })

  mainWindow.loadURL(winURL) // 加载窗口的URL -> 来自renderer进程的页面

  mainWindow.once('ready-to-show', () => {
    // 防止视觉闪烁
    mainWindow.show()
  })

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

在0.0.1-alpha里面，漏了show: false这一句，打算在下次更新里修复啦

关闭/最小化窗口⁍

通过ipcRenderer和主进程通信 Post not found: Electron-vue开发实战（三）| Render进程开发

渲染进程：

<!--src\renderer\components\Entry.vue-->
<i class="el-icon-minus" @click="minimizeWindow"></i>
<i class="el-icon-close" @click="closeWindow"></i>

<script>
export default {
  methods: {
      minimizeWindow () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.send('minimize_w')
    },
      closeWindow () {
      const { ipcRenderer } = require('electron')
      ipcRenderer.send('close_w')
    }
  }
}
</script>

主进程

// src/main/index.js
ipcMain.on('minimize_w', () => {
  const window = BrowserWindow.getFocusedWindow()
  window.minimize()
})

ipcMain.on('close_w', () => {
  const window = BrowserWindow.getFocusedWindow()
  if (process.platform === 'linux') {
    window.hide()
  } else {
    window.close()
    app.quit()
  }
})

hexo设置、调用cmd输入hexo命令⁍

设置⁍

通过electron-store建立本地json数据库，将hexo的根目录读写到配置文件里

Post not found: Electron-vue开发实战（六）| Electron数据本地存储：用electron-store实现json配置文件读写

// src/main/index.js
let hexoRoot
const Store = require('electron-store')
const store = new Store()
// 通过配置文件读写hexo根目录
function getRoot () { // TODO：错误处理，为空的情况，转换特殊字符等
  hexoRoot = store.get('hexo_root')
}

function setRoot (root) {
  store.set('hexo_root', root)
}

ipcMain.on('setConfig', (event, value) => {
  console.log(value)
  setRoot(value)
  event.returnValue = 'setSuccess'
})

新建文章⁍

前端传入文章的标题，传给主进程，调用shell输入hexo new [post_name]的命令，新建文章；

将文章标题进行特殊字符转换，然后通过路径打开该文章

Post not found: Electron-vue开发实战（五）| 主进程调用CMD

// src/main/index.js
ipcMain.on('newFile', (event, value, fname) => {
  console.log(value + fname)
  newAndOpenFile(value, fname)
  event.returnValue = 'success'
})

function newAndOpenFile (value, fname) {
  const cmdPath = hexoRoot
  const cmdStr = 'hexo new "' + value + '"' // hexo new "[article_name]"
  const workerProcess = exec(cmdStr, {
    cwd: cmdPath,
    encoding: 'gbk'
  })
  workerProcess.stdout.on('data', (data) => {
    console.log('stdout: ' + data.toString())
  })

  // 打印错误的后台可执行程序输出
  workerProcess.stderr.on('data', (data) => {
    console.log('stderr: ' + data.toString())
  })

  // 退出之后的输出
  workerProcess.on('close', (code) => {
    console.log('out code：' + code)

    try {
      shell.openPath(hexoRoot + '\\source\\_posts\\' + fname + '.md')
    } catch (error) {
      console.error(error)
    }
  })
}

打开文章⁍

Post not found: Electron-vue开发实战（二）| Main进程开发文中使用remote在渲染进程中实现了该功能，在实践中我去除了remote，选择用ipcRender和ipcMain通信实现了该功能。

渲染进程将消息传递给主进程，主进程通过调用系统dialog来打开文件。

// src/main/index.js
ipcMain.on('open_file', () => {
  openFile()
})

function openFile () {
  getRoot()
  dialog.showOpenDialog({
    title: '打开文件',
    defaultPath: hexoRoot + '\\source\\_posts\\',
    properties: ['openFile'],
    filters: [{ name: 'Markdown文件', extensions: ['md', 'markdown'] }]
  })
    .then((result) => {
      console.log(result.filePaths) // 获得打开的文件路径
      shell.openPath(result.filePaths[0])
    })
    .catch((err) => {
      console.log(err)
    })
}

一键部署⁍

同样是通过主进程调用shell传入命令 hexo cl&&hexo g -d

Post not found: Electron-vue开发实战（五）| 主进程调用CMD

ipcMain.on('deploy_all', (event) => {
  getRoot()
  const cmdPath = hexoRoot
  const cmdStr = 'hexo cl&&hexo g -d'
  // const cmdStr0 = iconv.decode(cmdStr, 'cp936')
  const workerProcess = exec(cmdStr, {
    cwd: cmdPath,
    encoding: 'gbk'
  })
  workerProcess.stdout.on('data', (data) => {
    console.log('stdout: ' + data.toString())
  })

  // 打印错误的后台可执行程序输出
  workerProcess.stderr.on('data', (data) => {
    console.log('stderr: ' + data.toString())
  })

  // 退出之后的输出
  workerProcess.on('close', (code) => {
    console.log('out code：' + code)
    event.returnValue = 'deploySuccess'
  })
})