思维导图

前言:

Electron 从最初发布到现在已经维护很长一段时间了，但是去年才开始慢慢升温。笔者个人恰好也有一些 Electron 的实践经验，原本这篇总结是大约半年前开始起草的，但是由于一些个人原因拖到现在才算是正式完稿，现在发出来供有意实践 Electron 的开发者借鉴，避免一些本人在实践中踩过的坑。此外，笔者的水平有限，难免出现错误，如果读者在阅读本文过程中发现原则性的错误，请务必指出，以免相关内容祸害他人。

本文的实践基于 Electron 1.x 。

创建基本应用

问题: renderer 端无 jQuery

根据官方的新手教程，我们很容易创建一个基本的 Electron 应用，我们不再累赘叙述，如果你只需要加载一个网页，那么只需要下面几行简单的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const { BrowserWindow } = require('electron')
let window
function createWindow() {
	window = BrowserWindow({
		width: 1024,
		height 720
	})
	window.loadURL('https://changkun.us')
}
app.on('ready', createWindow)

如果你真的尝试加载笔者的博客页面，会发现笔者博客的文字内容无法加载，这是由于 jQuery 找不到而产生的问题，为此我们并没有必要调整 Web 端的内容，只需要简单在 Electron 的 Renderer 端引入 jQuery 即可。

解决方法就可以使用 BrowserWindow 的 preload 参数，然后使用 preload 脚本为 renderer 端引入 jQuery:

1
2
3
4
5
6

// preload script
document.addEventListener('DOMNodeInserted', (event) => {
  if (!!window && !(window.$)) {
    window.$ = window.jQuery = require('../utils/jquery.min')
  }
})

相关 issue: https://github.com/electron/electron/issues/345

这个总结拖了有点久，原本按照惯例应该是圣诞节前后写好的，结果这次拖到了农历新年。

好在今年的除夕来得比往常要早，若是像去年春节延到二月份，这篇总结基本上就不会被写出来了。读了读自己往年的总结，不免读出一些学生时代的书生气息。尽管现在依然是学生身份，但却已天差地别。这篇总结也就不再沿用之前的标题，直接写做 『我的2016 年终总结』吧。

和往年一样，这一年也发生了大小不少事儿。但如果等我我年纪大了，届时回顾自己整段生命历程时，细数生命里有过多少关键节点，那么 2016 年绝对是必不可少的一个关键节点。