前言

前段时间，我用 electron-vue 开发了一款跨平台（目前支持Mac和Windows）的免费开源的图床上传应用—— PicGo ，在开发过程中踩了不少的坑，不仅来自应用的业务逻辑本身，也来自electron本身。在开发这个应用过程中，我学了不少的东西。因为我也是从0开始学习electron，所以很多经历应该也能给初学、想学electron开发的同学们一些启发和指示。故而写一份Electron的开发实战经历，用最贴近实际工程项目开发的角度来阐述。希望能帮助到大家。

预计将会从几篇系列文章或方面来展开：

1. electron-vue入门
2. Main进程和Renderer进程的简单开发
3. 引入基于Lodash的JSON database——lowdb
4. 跨平台的一些兼容措施
5. 通过CI发布以及更新的方式
6. 开发插件系统——CLI部分
7. 开发插件系统——GUI部分
8. 想到再写…

说明

PicGo 是采用 electron-vue 开发的，所以如果你会 vue ，那么跟着一起来学习将会比较快。如果你的技术栈是其他的诸如 react 、 angular ，那么纯按照本教程虽然在render端（可以理解为页面）的构建可能学习到的东西不多，不过在main端（electron的主进程）应该还是能学习到相应的知识的。

如果之前的文章没阅读的朋友可以先从之前的文章跟着看。

1
2
3
4
5
6
7
8
9
10
11
12
13

import Datastore from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import { app } from 'electron'

const STORE_PATH = app.getPath('userData') // 获取electron应用的用户目录

const adapter = new FileSync(path.join(STORE_PATH, '/data.json')) // 初始化lowdb读写的json文件名以及存储路径

const db = Datastore(adapter) // lowdb接管该文件

export default db // 暴露出去

1

import db from '../datastore' // 取决于你的datastore.js的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import Datastore from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import { app, remote } from 'electron' // 引入remote模块

const APP = process.type === 'renderer' ? remote.app : app // 根据process.type来分辨在哪种模式使用哪种模块

const STORE_PATH = APP.getPath('userData') // 获取electron应用的用户目录

const adapter = new FileSync(path.join(STORE_PATH, '/data.json')) // 初始化lowdb读写的json文件名以及存储路径

const db = Datastore(adapter) // lowdb接管该文件

export default db // 暴露出去

1
2
3
4
5

if (process.type !== 'renderer') {
  if (!fs.pathExistsSync(STORE_PATH)) { // 如果不存在路径
    fs.mkdirpSync(STORE_PATH) // 就创建
  }
}

1
2
3

if (!db.has('uploaded').value()) { // 先判断该值存不存在
  db.set('uploaded', []).write() // 不存在就创建
}

1
2
3
4
5
6

{
  "height": 514,
  "type": "weibo",
  "width": 514,
  "id": "7f247aa7-ffeb-4bb1-87f1-a0d69824ec78"
}

1
2
3
4
5
6

// ...
import LodashId from 'lodash-id'
// ...

const db = Datastore(adapter)
db._.mixin(LodashId) // 通过._mixin()引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import Datastore from 'lowdb'
import LodashId from 'lodash-id'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import { remote, app } from 'electron'

const APP = process.type === 'renderer' ? remote.app : app
const STORE_PATH = APP.getPath('userData')

if (process.type !== 'renderer') {
  if (!fs.pathExistsSync(STORE_PATH)) {
    fs.mkdirpSync(STORE_PATH)
  }
}

const adapter = new FileSync(path.join(STORE_PATH, '/data.json'))

const db = Datastore(adapter)
db._.mixin(LodashId)

if (!db.has('uploaded').value()) {
  db.set('uploaded', []).write()
}

if (!db.has('picBed').value()) {
  db.set('picBed', {
    current: 'weibo'
  }).write()
}

if (!db.has('shortKey').value()) {
  db.set('shortKey', {
    upload: 'CommandOrControl+Shift+P'
  }).write()
}

export default db

1
2

db.defaults({ posts: [], user: {}, count: 0 })
  .write() // 一定要显式调用write方法将数据存入JSON

1

db.get('posts').value() // []

1
2
3

db.get('posts')
  .find({ id: 1 })
  .value()

1
2
3
4

db.get('posts').insert({ // 对数组进行insert操作
  title: 'xxx',
  content: 'xxxx'
}).write()

1
2

db.set('user.name', 'typicode') // 通过set方法来对对象操作
  .write()

1
2
3

db.set('user', {
  name: 'typicode'
}).write()

1
2

db.update('count', n => n + 1) // update方法使用已存在的值来操作
  .write()

1
2
3

db.get('posts')
  .remove({ title: 'low!' })
  .write()

1
2

db.unset('user.name')
  .write()

1
2
3

db.get('posts')
  .removeById(id)
  .write()

1
2
3

db.read().get('xxx').value()

db.read().set('xxx', 'xxx')

1
2
3
4
5
6

// ...
import db from '../datastore'
import Vue from 'vue'
// ...

Vue.prototype.$db = db