使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
[官网](https://electronjs.org/)
实质就是一个精简的Webkit浏览器显示html页面，通过electron做中间层可以和系统交流。给web项目套上一个node环境的壳。
前言
公司买的推广居然没有后台的api，没有api又不想死板手动操作。那就做个爬虫吧。但是又是给小白用的，自然最好带个界面，本来用C#拖出来就好了，看到vs那么大，下载都要半天。干脆就用Electron做一个，顺便学习一下Electron。
准备工作
安装nodejs
npm安装electron（最好换成cnpm，不然可能失败）
hello world
官方提供了快速开始的手脚架，怎么方便怎么来。
https://github.com/atom/electron-quick-start
clone下来
git那些不是我们需要的，就删掉。
安装相关的依赖，推荐用yarn。
yarn https://yarn.bootcss.com/
cd 到 目录下
cnpm install yarn yarn
等待依赖安装完成。
npm run start
顺利的话就可以看到程序启动。
界面编写
准备完毕，开始进入正题。
用vscode打开文件夹，顺带一提，vscode也是基于electron。vscode不愧是巨硬出品，越来越好用了。
整理一下
这里就不累赘了。
后台有多个小号要登录，就写个登录页面。
编辑一下index.html
<html> <head> <meta charset="utf-8"> <link href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div> <div> <div role="form"> <div> <label for="input_name">登录帐号</label> <div> <input type="text" placeholder="请输入用户名"> </div> </div> <div> <label for="input_pass">登录密码</label> <div> <input type="password" placeholder="请输入登录密码"> </div> </div> <div> <label for="input_check">验证码：</label> <div> <input type="text" placeholder="请输入验证码"> </div> <div> <img src="https://www.jb51.net/code.png" /> </div> </div> <div> <div> <button>登录</button> </div> <div> <button>刷新验证码</button> </div> </div> </div> </div> </div> <script> require('./index.js'); </script> </body> </html>
都是些 很简单的html代码，为了好看的就用了bootstrap
electron可以调用bootstap、jquery ，方便开发。调用jq有个小小的坑，注意一下。
不过我这里不需要什么效果，就简单点。
在vscode 快捷键 Ctrl + ` 调出 CMD 运行一下
npm run start
就可以看到我们刚刚写的网页了
下载验证码
登录是需要验证码的，我们把验证码下载下来。
流程是 请求验证码网站，下载验证码保存到本地显示，验证码的cookie保存下来，后面登录时候需要用到cookie
安装需要的依赖 superagent ， fs-extra
编辑 main.js
const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow const path = require('path') const url = require('url') // 爬虫 const superagent = require('superagent'); // 操作文件 const fs = require('fs-extra'); let mainWindow // 验证码的cookie var codeCookie // 验证码网址 const codeUrl = '验证码地址'; // 头信息 const browserMsg = { 'User-Agent': 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600 }) superagent .get(codeUrl) .set(browserMsg) .end((err, res) => { codeCookie = res.header['set-cookie'] console.log('codeCookie: ' + codeCookie) // 验证码图片保存到本地 fs.outputFile(path.join(__dirname) + '/code.png', res.body, function (err) {}) }) mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // 打开调试控制台 mainWindow.webContents.openDevTools() mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { if (mainWindow === null) { createWindow() } })
说一下安装的依赖
fs-extra fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API。
主角就是 superagent https://www.npmjs.com/package/superagent
运行一下
很好，我们要的验证码和cookie 都有了。
分析登录流程
用 Fiddler 抓包工具和浏览器的调试控制台分析一下后台的登录。
这里不是重点就略过了。
Electron 通信
渲染进程（就是网页） 登录 需要 主进程保存的codeCookie ，这就要两者进行通信。
Electron之间的通信是用ipc
主进程的是 ipcMain 也可以用 mainWindow.webContents来发送
渲染进程的是 ipcRenderer
这里演示一下 主进程发送cookie 给 渲染进程
main.js 文件