Electron的入门不容易啊

官方的入门就两篇:

quick start
api demos

quick start

这个可简单了, 代码的注释也很充分.

文档地址: https://electronjs.org/docs/tutorial/quick-start
仓库地址: https://github.com/electron/electron-quick-start
首页就有介绍: https://electronjs.org

api domos

关于这个, 唯一的一个关注点就是, 请使用淘宝的cnpm安装, npm怎么弄都不会成功. 详情参考隔壁: 2017-12-21-npm & n & nvm

有趣的地方

引入包竟然有三种写法:

现在clone下来的写法

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

之前的写法

var app = require('app');
var BrowserWindow = require('browser-window');

现在文档中的写法

const {app, BrowserWindow} = require('electron')

这从一个侧面证明js确实是perl哲学, 这种哲学用起来还是很爽的, 但是, 看别人的代码就痛苦了.

匿名函数

() => { }//现在都这么写了. 比function省字母, 但是, 越来越perl化了. 预计, perl的问题很快就会在js出现.

js搞多参数也很简单啊

// 过时的
menu.popup(browserWindow, 100, 200, 2)
// 替换为
menu.popup(browserWindow, {x: 100, y: 200, positioningItem: 2})

交互式的玩electron(REPL)

electron --interactive

关系

js + css + html 一切的原点
electron 使用了不同的v8引擎的js
node 使用v8引擎的js
coffee 可以编译为js的语言, 可以类比为groovy vs java
scss 可以编译为css的语言, 可以类比为coffee比less更简单合理

附录: 笔记稍微记一点

不建议大家阅读这一段, 直接去看原文更好: https://electronjs.org/docs/tutorial/quick-start
顺便吐槽一下, 这个quick start是我看过的最不靠谱的quick start, 虽然他确实很quick, 但是, 他啥都没做啊, 好歹操纵下元素, 然后保存下用户输入啥的吧. 太敷衍了. scip之所以是经典, 因为他在第一章第一小节就已经开始牛顿法求平方根了.

可以clone 这个库参考: git@github.com:electron/electron-quick-start.git
但是, 墙裂建议大家还是自己建一个空白目录, 根据文档搞这个quick-start, (第一遍)
牛死了, 全局安装electron之后, 就不需要局部的node_modules了. (记得用cnpm)
主意这个tutorial的代码风格比git上的项目要新. 强烈建议大家根据tutorial搞. (第二遍)
重要的话说三遍, 强烈建议大家根据tutorial搞.

一个例子

!!!!!!!!!!一定要先看后面我写的注意事项, 否则会无法运行.!!!!!!!!!!!

原文链接(中文翻译相当准确到位): http://get.ftqq.com/7870.get
英文也需要: https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658

注意事项

//这种写法已经不被支持了, 会报错: 包app找不到
var app = require('app');
var BrowserWindow = require('browser-window');
//换成这种更优雅的
const {app, BrowserWindow} = require('electron')

//然后api也更新了
mainWindow.loadURL('file://' + __dirname + '/app/index.html');
//原本的写法也不支持了, 对你没看错, api就是很蛇精的改了下大小写, 太他妈神奇了.
mainWindow.loadUrl('file://' + __dirname + '/app/index.html');

//ipc的写法也变掉了.
//package.json指定的入口程序main.js里面要改成这样
const {app, BrowserWindow,ipcMain} = require('electron')
//页面的index.js里面要改成这样
const {ipcRenderer} = require('electron')


//调试全局快捷键的时候我也遇到了问题, 一度我还怀疑karabiner, 最终发现是我的蓝牙键盘的问题. 重新开关了一次键盘, 取消了键盘上面一个长按引起的傻B设置. 我这个破键盘fn+cmd=取消cmd.真要命了.
//全局快捷键无法拿到参数问题
ipcRenderer.on('global-shortcut', function (arg) {...//注意, 这个arg其实是这条消息本身, 并不是一个参数, arg其实是类似这样的东西: 
{"sender":{"domain":null,"_events":{},"_eventsCount":8}}


ipcRenderer.on('global-shortcut', function (a, b) {...//改成这样就ok了, 可以直接用b作为传过来的参数.第二个参数b才是从主进程main.js传过来的参数.

//然后响应快捷键这里原文也很啰嗦
var event = new MouseEvent('click');
soundButtons[arg].dispatchEvent(event);
//改成这样:
soundButtons[b].click()
//关于这件事官方文档解释的很清楚
ipcRenderer.on(channel, listener)
channel String
listener Function
监听 channel，当接收到新的消息时 listener 会以 listener(event, args...) 的形式被调用。


//设置面板setting
//还是要注意url大小写
settingsWindow.loadURL('file://' + __dirname + '/app/settings.html');
//还是要置换ipc的写法
var ipc = require('ipc');
const {ipcRenderer} = require('electron')

//文件保存, 
//我把从userhome读写的这句注释掉了, 我最恨文件散的到处都是了.
function getUserHome() {
    return process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'];
}
//相应的配置地址改为当前目录了.
var nconf = require('nconf').file({file:'./sound-machine-config.json'});

//一通查找问题, 最后发现还是键盘坑, 这个键盘当我按下alt键的时候. 1-9都变成个各种字符, 因此使用1-9+art的快捷键永远不会触发. 所以快捷键里面不要是指alt......
//另外, 分进程的js和html修改后不需要重启主应用就可以刷新出来.
//顺便吐槽下作者的代码风格. 真心的啰嗦啊. 我改了一下:
var modifierCheckboxes = document.querySelectorAll('.global-shortcut');
......//这里的节奏也不对, 是循环套循环(二阶循环)的写法, 完全可以拆成两个简单的循环, 否则scip白看了.
modifierCheckboxes[i].addEventListener('click', function (e) {		
	        bindModifierCheckboxes(e);
	    });		
}
function bindModifierCheckboxes(e) {
  ......//这里逻辑特别绕, 完全是奔着咋复杂咋弄的. 而且又不必要的读了一遍配置文件.
}
//这段的代码风格实在是令人发指, 忍不了了(最受不了面向对象了), 我重写了一遍:

/**初始化checkbox 遍历checkbox, 设置所有的点击函数*/
for (var i = 0; i < con.length; i++) {	
	
	//默认都设置为unchecked
	con[i].checked=false
     // Binding of clicks comes here
	con[i].addEventListener('click', e => bindModifierCheckboxes(e))

	
}
//遍历设置, 并且修改html的checked状态为设置中的状态
let shortcutKeys = conf.readSettings('shortcutKeys');
shortcutKeys.forEach(//如果正常, 记得删除无用符号(主要是括号). 见鬼了, E要大写. 该死的驼峰
	i=>document.querySelector('input[value = "'+i+'"]').checked=true
		
)
/**初始化结束*/


//点击的处理, 完全不需要读配置, 只要写配置就好了
function bindModifierCheckboxes(e) {
	var con= document.querySelectorAll('input[name = "con"]:checked')
	var shortcutKeys=Array.from(con).map((i) => { return i.value; })
    conf.saveSettings('shortcutKeys', shortcutKeys);
    ipcRenderer.send('set-global-shortcuts');
}

  
  
//连带着, settings.html也重写了, 最烦乱用属性了, 顺手加了cmd, 因为alt在某些键盘会修改其他键的作用, 比如1-9会变为字符, 因此无法测试, 所以加了cmd
<body>
	<div class="close">Close</div>
	<h2>Settings</h2>
	<p>Modifier keys for global shortcuts</p>          
	<input type="checkbox" class="global-shortcut" 	name="con" value="ctrl"/>
	<label for="global-shortcut-ctrl">Ctrl</label>
	<input type="checkbox" class="global-shortcut" name="con"  value="shift"/>
	<label for="global-shortcut-shift">Shift</label>
	<input type="checkbox" class="global-shortcut"  name="con" 	value="alt"/>
	<label for="global-shortcut-alt">Alt</label>
	<input type="checkbox" class="global-shortcut"  name="con" 	value="cmd"/>
	<label for="global-shortcut-cmd">cmd</label>
	
	<script src="js/settings.js"></script>
</body>
  
//发个pull, request给作者. 决定基于研究, 昨晚整个案例再推送给作者.
//下一步就是mac右上方的小图标菜单了.
//大家都熟悉了吧, 还是要改require和ipc调用
const {Tray,Menu} = require('electron').remote
ipcRenderer.send('open-settings-window')
  
  
//最后一步打包:
cnpm install --save-dev electron-packager //安装打包工具
//在package.json加一行
"scripts": {
    "start": "electron .",
    "package" : "electron-packager . SoundMachine --all  --out=. --icon=./app/img/app-icon.icns"
},
//并且把版本号改为lastest, 因为那个古老的0.3已经下载不到了.
"devDependencies": {
    "electron-packager": "latest",
    "electron": "latest"
},

//terminal
cnpm run-script package
//然后还是会被卡死在下载这一步. 开启全局翻墙吧少年.
//反正我被这一步卡住了, 不过对于入门而言, 这个其实不是问题, 可以选择放弃打包.

总结: electron是一个热衷于改api的库, 和苹果一个德行, 也是醉了.

宝藏

通过这个项目: https://github.com/felixrieseberg/electron-code-editor

发现electron其实有很多例子:

https://github.com/electron/simple-samples
https://github.com/hokein/electron-sample-apps

quick start

api domos

有趣的地方

关系

附录: 笔记稍微记一点

一个例子

更多例子

宝藏