万事开头难,在文章创作前往往需要先有一个想法,当你有了模糊的想法,便可以开始研究。比方说,你想要写关于”微前端”的文章,那么,可以去调研实践微前端框架。做这些事情的同时,你可能会得到灵感,然后知道接下来怎么去写完它。(例如我的一篇文章《微前端很好,为什么我却不使用?》就是这么写的,虽然写的一般)

仅有想法肯定是不够的,一旦你知道了文章的走向以及讲述方式,应当记录下来,这将会是你的脉络图,同时也是流畅写下整个文章的关键。例如记录好每个节点提纲、讲述目的、技术要点、个人想法和感受等等这些基本点。这样做能防止创作时出现文思枯竭,即使你可能不觉得这样写是完美的,但你至少仍然能知道全篇基本脉络。

不管是不是计划好的,你的文章一定会有一个主题,而根据这个主题,最终你会作一番关于你对这个题目的想法和声明。工欲善其事,必先利其器。这就是为什么我要做这个项目的原因——总有一些想法需要记录,围绕着某个主题,还需要把文章脉络理清。”草稿箱”或许可以做到记录功能,但是作为一个优秀的码农,有什么理由拒绝自己开发一套笔记程序呢?

image.png

本文将带大家鼓捣一个跨端笔记本程序,让你能够时刻记录碎片的文字或灵感,并且同时拥有在线网站,无需服务器维护费用,无需域名(有的话当然更好),重点是开发非常简单,文末也会附上项目完整开源地址。

通过本项目你将会学习到:

  • 开发一个完整的 Electron 小项目
  • 不依赖框架的原生 Node 如何开发 http 服务,接收处理参数、接收表单图片、创建图片静态服务等
  • Electron 中如何顺利进行进程通信、资源目录注意事项等

先来看看项目初步效果:

2022-08-03 17.58.05.gif

创建主项目

本来想使用 Vite + Vue3 + Electron 的方案,但是找了一圈似乎没有 Electron 官方的案例,大都为社区实现,于是改用 Vue2 (后面还有一个原因是md编辑器也暂时没有官方适配Vue3),本着简单快速研发本项目的宗旨,使用 Vue-cli 创建工程是目前最快速稳定的方法:

本项目创建环境:

image.png

首先你需要安装好 vue-cli 工具,在任意终端执行 vue ui 命令即可进入UI界面

image.png

记得选择Vue2的版本,随意配置过后,点击“插件”,添加插件:

image.png

搜索并安装 Electron builder 插件

image.png

该插件会自动将刚才创建的项目改造为 Electron 环境的项目,目前仅支持至13.0这个版本,此时运行 electron:serve,可以看到桌面app就可以跑起来了:

image.png

也可以试试运行 electron:build 看看打包后的文件,这里就不演示了。

接下来引入 element ui,同样也是用“插件”,选择按需引入,很快就自动配置好了~

image.png

如果你需要代码美化校验等规范化功能,也可以试试我写的这个插件~

image.png

image.png

初始化仓库

搭建了项目的基础,现在我们需要初始化一个文章的舞台了。网页项目使用 Docsify 驱动,开启 GitHubPages 之后便能搭起一个在线站点,而文章也是保存在 Github 仓库中。我们使用子进程操作 Git 提交即是“发布到线上”,也是“储存到云端”,而每次打开程序都 Git 拉取一遍代码,简单粗暴实现了“云端”同步。

image.png

首先到 Github 创建一个空仓库,可以勾选个 README.md 之类的,反正就是创建一个文件,这样可以默认建立一个main分支。

image.png

初始化的项目原型是使用我的一个仓库实例 FEbook 来修改的,接下来要做的事情就是将这个项目“克隆”到上面的空仓库中,然后修改其中一些配置即可,这里先简单写一个表单界面,确定需要修改的值:

image.png

1
2
3
4
5
6
7
form: {
name: 'Any-Note-Book',
repo: 'palxiao/FEbook',
plugin: ['文字计数', '图片缩放查看器', '代码复制到剪贴板'],
blog: 'https://blog.palxp.com',
juejin: 'https://juejin.cn/user/2682464103060541/posts',
}

这里的form表单对象就对应着要修改的值,到时候将项目中的 index.html 文件复制多一份出来,使用简单的字符串替换即可完成一个”从配置文件生成页面”的功能啦。

image.png

这样在点击按钮的时候我们还需要一个数据库进行保存,既然是在渲染层,那么直接使用 localStorage 就是最简单的持久化储存方案了。

在主进程中编写Node服务

配置页面有了,现在我们需要根据配置对项目进行初始化等操作了,可能需要如下一些接口:

  1. /pull 拉取线上项目,一些初始化操作,根据配置生成文件等
  2. /push 提交发布以及保存项目
  3. /list 文章列表
  4. /detail 获取文章详情
  5. /save 保存文章内容

接下来开始实现以上接口,创建一个 server.js 作为http服务,这里我们就不使用任何框架,仅用node原生模块来开发:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 导入http模块:
const http = require('http')

// 创建http server,并传入回调函数:
const server = http.createServer(function (request, response) {
// 设置跨域允许
response.setHeader('Access-Control-Allow-Origin', '*')
response.setHeader('Access-Control-Allow-Headers', '*')
response.setHeader('Access-Control-Allow-Methods', '*')

if (request.url === '/init') {
// TODO 没有路由系统,简单写几个接口,直接if大法
} else if (request.url === '/push') {
}

console.log(request.method + ': ' + request.url)
})

server.listen(3000) // http listen in 3000 port

获取资源路径

Electron 中,我们通常可以将文件保存在app资源目录下,但由于开发时资源目录与生产时有所区别,所以需要封装一个方法来获取相应路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
const getResourcesPath = () => {
let thePath = ''
switch (process.env.NODE_ENV) {
case 'development':
// basePath = path.join(__static, '/') // eslint-disable-line no-undef
thePath = 'static'
break
case 'production':
thePath = path.join(process.resourcesPath, './static')
break
}
return thePath
}

path.join(__static, '/') 该目录可以作为程序的资源引用目录,作为资源读写目录的话经测试会有问题,本地环境中对 public 目录频繁写入数据可能会造成前端代码重复编译,所以不能使用这个目录。如果生产环境下把资源全部写入 process.resourcesPath 中肯定会很乱,直接使用 Node 在其中创建目录,则会提示没有写入权限,此时可以配置 extraResources 在打包时引入额外目录来做归档管理。

如何配置额外资源路径

vue.config.js 中如下配置,注意其中嵌套的字段,由于项目是通过 cli 创建的,这和 package.json 的配置形式有所差别:

1
2
3
4
5
6
7
8
9
10
pluginOptions: {
electronBuilder: {
builderOptions: {
extraResources: {
from: './template/',
to: 'template',
},
},
},
},

这里我是配置了将一个 template 文件夹打包进程序资源目录中,该目录放置的是Docsify的一些初始化文件,后面会用到。

项目初始化

2022-08-03 17.26.35.gif

以项目中是否包含dosc这个文件夹为依据,判断此时的项目状态是否完整。因为这个目录将会作为Pages的根目录,文章等资源当然也是存放在这下面,而如果是空项目,则将事先准备好的一众初始文件复制到项目中。

判断目录是否存在

1
2
3
4
// 判断目录是否存在,可以用 fs.access
fs.access(path, (err) => {
if (err) { } // err失败表示目录不存在,否则目录存在
})

实现文件复制

1
2
3
4
// Node实现复制涉及到目录的递归相对复杂,我们可以用shell的cp命令来代替
exec(`cp -r ${getTemplatePath()}/complete/* ${getResourcesPath()}`, () => {
// 将准备好的Template复制到资源路径当中
})

实现拉取接口

默认你本地已有Git环境,本程序不会做判断

image.png

创建一个 shell.js,开启子进程调用Git,根据传入的项目名拉取代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const branch = 'main' // 拉取的分支名
const fullPath = 'static/' // 项目拉取到本地的路径

const child_process = require('child_process')
const exec = child_process.exec

const pullRepository = function (name) {
const gitAddress = `git@github.com:${name}.git`
const shell = `git clone -b ${branch} ${gitAddress} --depth 1 ${fullPath}` // 克隆深度为1,节省空间
exec(shell, function (error, stdout, stderr) {
// 执行完即可拉取到代码仓库
})
}
module.exports = { pullRepository }

执行完即可拉取到代码仓库,仓库的路径是我们接下来整个项目的核心目录,对文章及资源的处理都会在这个目录下进行。

实现提交接口

提交与上面的拉取类似,利用子进程对Git进行处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const pushRepository = function () {
const message = 'feat: auto update'
const fullPath = getResourcesPath()
const sp = `cd ${fullPath} &&`

return new Promise((resolve) => {
exec(`${sp} git add . && git commit -m '${message}'`, (error, stdout, stderr) => {
if (String(error) !== 'null') {
resolve('没有可更新的提交')
return
}
exec(`cd ${fullPath} && git push origin ${branch}`, (error, stdout, stderr) => {
resolve(stdout)
})
})
})
}

第一次进行提交后进入 Github 仓库,选择 Setting -> Pages -> Branch,按下图示保存:

image.png

稍等一会刷新就可以看到你的站点已经生成了,如果你有自己的域名也可以配置下面的 custom domain,或手写CNAME文件,这里就不演示了

image.png

Pages效果展示:

2022-08-03 17.37.09.gif

Electron中的进程通信

本来我用 Node 创建服务,只需要使用 TCP 即可在主渲染层之间通信,但是Node服务在本地启动就需要监听一个端口,本地往往不能确定端口是否被占用,也就意味着服务启动完成时端口号才可以被确定,这时就需要从主进程往渲染层通知到如何访问服务了。

由于渲染进程相当于开启一个浏览器,是不带 Node 执行环境的(好像也可以强行开启,默认是关闭),所以主渲染进程间一般是采用 IPC 进行通信,通过 preload 预加载的方式向渲染进程注入一个 electronipcRenderer 方法。

由于项目依赖了cli工具(官方文档完整说明)需要先在vue.config.js中添加:

1
2
3
4
5
6
7
8
module.exports = defineConfig({
.....
pluginOptions: {
electronBuilder: {
preload: 'src/preload.js',
},
},
})

接着在 src/background.js 中就加上预加载文件:

1
2
3
4
5
6
7
8
const { join } = require('path')
const win = new BrowserWindow({
....
webPreferences: {
....
preload: join(__dirname, 'preload.js'), // 直接这么写就行,对应路径在上面配置了
},
})

src/preload.js 文件可以这么写:

1
2
3
4
5
6
import { ipcRenderer } from 'electron'
window.ipcRenderer = ipcRenderer

window.ipcRenderer.on('setConfig', (e, data) => {
console.log(data) // 打印出 xxxxx
})

然后在主进程中就可以这么发送数据:

1
win.webContents.send('setConfig', xxxxx)

就在我这么一顿行云流水的操作过后,实际运行却是没有效果的!因为 Electron 又默认把 contextIsolation 上下文隔离给默认开启了。这就和预加载功能冲突了,上下文环境都不是同一个,我预加载了个寂寞。。对于刚接触 Electron 的小白我真的表示不能理解,所以只好把这个变量设置为false先了。

走到这一步的时候,我也成功进行了 IPC 通信(其实就是个全局事件广播),但是我突然意识到不需要IPC通信了,把 preload.js 改成 server.js ,成功后返回端口注入到渲染进程中不就解决我的需求了?

Nodejs判断端口是否占用

我们可以使用 net 模块建立一个 TCP 连接,成功连接则立即关闭服务,返回端口可用。连接失败则返回端口已被占用。

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
// checkPortIsOccupied.js
const net = require('net')

// 检测端口是否被占用
function portIsOccupied(port, cb) {
// 创建服务并监听该端口
const server = net.createServer().listen(port)

server.on('listening', function () {
server.close() // 成功连接,则关闭服务
cb(false)
})

server.on('error', function (err) {
if (err.code === 'EADDRINUSE') {
cb(true)
console.log('The port【' + port + '】 is occupied, please change other port.')
}
})
}

function checkPort(port) {
return new Promise((resolve, reject) => {
portIsOccupied(port, (isOccupied) => {
isOccupied ? reject() : resolve()
})
})
}

module.exports = checkPort

接着就可以在 预加载 server.js 中修改 server.listen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const checkPort = require('./utils/checkPortIsOccupied')

// listen
function startServer(port = 3000) {
checkPort(port)
.then(() => {
server.listen(port)
// 此时服务启动,端口号确定,通过注入到全局变量 window 中,告知渲染进程请求地址
window._apiUrl = `http://127.0.0.1:${port}`
})
.catch(() => {
startServer(port + 1)
})
}

startServer()

渲染进程中获得请求地址:
image.png

接入md编辑器

md编辑器当然是使用字节开源的掘金同款编辑器 bytemd,咱们直接全套梭哈:

1
2
3
4
5
6
7
8
9
10
11
12
13
dependencies: {
"@bytemd/plugin-breaks": "^1.17.2",
"@bytemd/plugin-footnotes": "^1.12.4",
"@bytemd/plugin-frontmatter": "^1.17.2",
"@bytemd/plugin-gemoji": "^1.17.2",
"@bytemd/plugin-gfm": "^1.17.2",
"@bytemd/plugin-highlight": "^1.17.2",
"@bytemd/plugin-medium-zoom": "^1.17.2",
"@bytemd/plugin-mermaid": "^1.17.2",
"@bytemd/vue": "^1.17.2",
"bytemd": "^1.17.2",
"juejin-markdown-themes": "^1.29.3"
}
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
<template>
<Editor v-bind="options" :value="content" :plugins="plugins" @change="handleChange" />
</template>

<script>
import 'bytemd/dist/index.min.css'
import 'juejin-markdown-themes/dist/juejin.min.css'
import 'highlight.js/styles/github.css'

import { Editor } from '@bytemd/vue'
import zhHans from 'bytemd/locales/zh_Hans.json'
import breaks from '@bytemd/plugin-breaks'
import highlight from '@bytemd/plugin-highlight'
import footnotes from '@bytemd/plugin-footnotes'
import frontmatter from '@bytemd/plugin-frontmatter'
import gfm from '@bytemd/plugin-gfm'
import mediumZoom from '@bytemd/plugin-medium-zoom'
import gemoji from '@bytemd/plugin-gemoji'
import mermaid from '@bytemd/plugin-mermaid'

const uploadImages = async (files) => {
// 执行图片上传操作
return [{ url, alt }]
}

const plugins = [
gfm(),
breaks(),
footnotes(),
frontmatter(),
gemoji(),
highlight(),
mediumZoom(),
mermaid(),
// Add more plugins here
]

export default { .... 以下省略

image.png

图片上传

bytemd 配置了 uploadImages 这个钩子即可开启图片上传,在回调中会返回一个files对象,我们先只取数组第0项实现单文件上传,那么如何将 file 类型对象传递给服务端呢?这时候就需要使用浏览器 FormData 函数来构建一个表单数据,这里注意不需要设置成 multipart/form-data 类型,直接发送即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 封装保存图片方法:
const saveImg = async (files) => {
return new Promise((resolve) => {
const formData = new FormData()
formData.append('file', files[0])
const request = new XMLHttpRequest()
request.open('POST', `${window._apiUrl}/upload`) // 请求upload接口
// 监听request获取上传结果,load为成功回调,loadend则不管成功与否都会返回
request.addEventListener('load', ({ currentTarget }) => {
resolve(JSON.parse(currentTarget.response))
})
request.send(formData)
})
}
1
2
3
4
5
// 编辑器的图片上传回调中调用方法
const uploadImages = async (files) => {
const res = await api.saveImg(files)
return [{ url: window._apiUrl + res.result.path, alt: 'img' }]
}

一般如果使用http框架开发的话 (如 express) 框架会帮我们处理好参数,这里我们原生开发,所以需要额外处理。一开始我选用比较常见的表单数据解析包 formidable 来处理文件,但是在 Electron 的打包环境中却出现了未知的报错,苦恼之余又找到了另一个解析包 multiparty 非常完美而且使用起来和 formidable 也很类似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const multiparty = require('multiparty')

.... const server = http.createServer( ......

if (request.url === '/upload') {
const form = new multiparty.Form()
form.parse(request, async function (err, fields, files) {
const file = files.file[0]
const reader = fs.createReadStream(file.path)
const name = Math.random().toString() + '.jpg'
const stream = fs.createWriteStream(path.join(getResourcesPath(), './docs/images/' + name))
reader.pipe(stream)
setJson(response, { path: '/images/' + name })
})
}

docs/images 这个目录是我定义的项目中图片资源目录,图片最终会随着 git push 被提交到远程仓库中,实现了在线图床。

image.png

图片静态服务

一开始其实想把图片放进 public 目录来读取就行,本地测试是没问题,但打包的程序是会把网页项目整个打包成 asar 模式,无法做可写文件操作,所以这里我选择用一个静态资源服务来为保存的图片提供读取功能,保存路径也在上面说明了。而在渲染进程提交保存时则把路径地址替换掉,读取时再逆向拼接回本地服务地址以保证显示。

编辑/查看状态 保存后
image.png image.png

就在前面 server.js 上定义一个url判断,将 images 目录作为静态目录,访问这个链接即为读取该目录下的图片,创建一个可读流(写入内存中)然后直接响应给客户端即可实现资源读取服务。

1
2
3
4
5
6
7
8
// server.js
....http.createServer.....
if (request.url.indexOf('/images/') !== -1) {
const fileName = request.url.split('/images/')[1]
const stream = fs.createReadStream(path.join(basePath, 'static/' + fileName)) // basePath后面说明
response.setHeader('content-type', 'images/jpg')
stream.pipe(response)
}

2022-08-01 11.09.03.gif

之所以不保存为网址的绝对路径,是考虑到域名可能发生变化的原因,相对路径更灵活些。还有 Pages 网页部署需要时间,不是即时生效的,显示网络路径有波动问题。

结尾

基于本仓库的几个在线案例展示:

https://book.palxp.com/#/

https://book.yzmblog.top/#/

https://myhzxn.github.io/Taro/#/

项目还有不少可以完善的地方,有需要再看看继续更新点啥功能🤗开源地址:any-note-book