什么是电子

使用JavaScript、HTML和CSS构建跨平台桌面应用程序

[官方网站](https://electronijs . org/)

本质上，一个精简的Webkit浏览器显示html页面，并可以通过电子中间层与系统通信。用节点环境对web项目进行外壳化。

前言

公司买的推广没有后台api，也不想硬性手动操作。那就做个爬行动物。但这是给小白的。自然最好带个接口。用C#拖出来就行了。看到vs这么大，下载了半天。你为什么不直接和electronic做一个，顺便向electronic学习呢？

准备工作/即将工作

安装nodejs

电子安装在npm中(最好用cnpm代替，否则可能会失效)

你好世界

官方提供了一个快速启动的手脚架，怎么方便怎么来。

https://github.com/atom/electron-quick-start

克隆下来

Git，删掉那些我们不需要的。

对于与安装相关的依赖项，建议使用纱线。

纱https://yarn.bootcss.com/cd到目录

cnpm install yarn等待相关安装完成。

如果npm运行启动成功，您可以看到程序启动。

界面书写

准备好进入正题。

用vscode打开文件夹，也是基于电子的。Vscode是一个硬产品，而且越来越容易使用。

整理

这里没有负担。

后台有多个小号需要登录，所以写一个登录页面。

编辑index.html

html head meta charset=' utf-8 ' link href=' http://apps . bdimg.com/libs/bootstrap/3 . 3 . 4/CSS/bootstrap . min . CSS ' rel=' external nofollow ' rel='样式表'/head body Div class=' panel-default ' style=' margin 3360 10px ' Div class=' panel-body ' Div class=' form-horizontal ' role=' form ' Div class=' form-group ' Label for=' input _ name ' class Label div class=' col-sm-10 '输入类型=' password ' class=' form-control ' id=' input _ pass '占位符='请输入登录密码'/Div/Div class=' form-group ' Label for=' input _ check ' class=' col-sm-2 control-Label '验证码：/Label div class=' col-sm-6 '输入类型=' text ' class=' form-control ' id=' input _ check '占位符='请输入验证码'/Div Div class=' col-sm-sm Div class=' form-group ' Div class=' col-sm-offset-2col-sm-2 '按钮id=' BTN _ submit '类=' btnbtn-default '登录/按钮/Div class=' col-sm-2 '按钮id=' BTN _ refresh '类=' btnbtn-default '刷新验证码/按钮/div/div/div/div脚本需要('。 /index . js ')；/script/body/html都是非常简单的html代码，bootstrap是为了好看而使用的

电子可以调用bootstap和jquery，方便开发。打jq有个小洞，注意。

但是我这里不需要什么效果，简单点就好。

在vscode快捷键Ctrl `中调用CMD并运行它

Npm run start可以看到我们刚刚写的网页

下载验证码

登录需要验证码。我们下载验证码。

流程是请求验证码网站，下载验证码保存到本地显示器，保存验证码的cookie，以后登录时使用cookie

安装所需的从属超级代理fs-extra

编辑main.js

const electronic=require(' electronic ')const app=electronic。app const浏览器窗口=电子版.BrowserWindowconst path=require(' path ')const URL=require(' URL ')//爬虫const super agent=require(' super agent ')；//操作文件const fs=require(' fs-extra ')；让主窗口/验证码的cookievar codeCookie//验证码网址' const codeUrl='验证码地址；//头信息const browserMsg={ ' User-Agent ' : ' Mozilla/5.0(Windows NT 6.3；wow 64)applebwebkit/537.36(KHML，像壁虎)Chrome/48。0 .2564 .116 Safari/537.36 '，' Content-Type ' : '应用程序/x-www-form-URL编码；charset=UTF-8 ' }；函数创建窗口(){主窗口=新浏览器窗口({宽度： 800，高度： 600 }) superagent .get(codeUrl).set(browserMsg).end((err，RES)={ CodeCookie=RES . header[' set-Cookie ']控制台。日志(' CodeCookie : ' CodeCookie)//验证码图片保存到本地fs。输出文件(路径。join(_ dirname)'/code。png '，res.body，function(err){ })})mainwindow。加载URl(URL。格式({路径名：路径。join(_ dirname，' index.html ')，protocol: 'file: '，斜杠： true })//打开调试控制台主窗口。网络内容。opendevtools()主窗口。on(' closed '，function(){ main window=null })} app。打开('就绪'，createWindow)应用程序。on(' window-all-closed '，function () { if (process.platform！=='达尔文'){ app。退出()} })应用程序。on(' activate '，function(){ if(main window===null){ createWindow()})说一下安装的依赖

fs-extra fs-extra模块是系统满量程模块的扩展，提供了更多便利的原料药，并继承了满量程模块的原料药。

主角就是超级绅士https://www.npmjs.com/package/superagent

运行一下

很好，我们要的验证码和甜饼干都有了。

分析登录流程

用游手好闲的人抓包工具和浏览器的调试控制台分析一下后台的登录。

这里不是重点就略过了。

电子通信

渲染进程（就是网页)登录需要主进程保存的codeCookie，这就要两者进行通信。

电子之间的通信是用工业程序控制(工业过程控制的缩写)

主进程的是ipcMain也可以用mainWindow.webContents来发送

渲染进程的是ipcRenderer

这里演示一下主进程发送甜饼干给渲染进程

main.js文件

const ipcMain=electronic。ipcMainipcMain.on('notice '，(e，msg)={ switch(msg){ case ' getcodeCookie ' : main window。网络内容。send(' codeCookie '，codeCookie)break(默认为： break)})打开调试控制台可以看到输出

index.js

const electron=必选(' electron ')；const ipcRenderer=electron。ipcRenderer//获取控件让BTN提交=文档。getelementbyid(' BTN _ submit ')；BTN _提交。addeventlistener(' click '，(e)={ ipcRenderer.send('notice '，' getcodeCookie ')；});//监听codecookieipcrenderer。on(' codeCookie '，(e，msg)={ CodeCookie=msg；console.log('接受主进程发送的codeCookie : ' codeCookie)；});运行一下，点击登录按钮

就可以在调试控制台看到codeCookie

模拟登录

我们需要登录后台，获取登录后甜饼干这样才方便我们操作。

编辑index.js

const electron=必选(' electron ')；const ipcRenderer=electron。ipcRendererconst path=require(' path ')；const super agent=require(' super agent ')；//链接const urls={ loginUrl: '登录的地址，代码Url: '验证码地址，targetUrl: '后台的地址'};//头信息const browserMsg={ ' User-Agent ' : ' Mozilla/5.0(Windows NT 6.3；wow 64)applebwebkit/537.36(KHML，像壁虎)Chrome/48。0 .2564 .116 Safari/537.36 '，' Content-Type ' : '应用程序/x-www-form-URL编码；charset=UTF-8 ' }；//验证码cookievar codeCookie//登录后的cookievar tokenCookie//获取控件const BTN _ submit=文档。getelementbyid(' BTN _ submit ')；const BTN _ refresh=文档。getelementbyid(' BTN _刷新')；const input _ name=document。getelementbyid(' input _ name ')；const input _ pass=文档。getelementbyid(' input _ pass ')；常量输入_代码=文档。getelementbyid(' input _ code ')；//登录按钮点击事件BTN _提交。addeventlistener(' click '，(e)={ ipcRenderer.send('notice '，' getcodeCookie ')；//获取输入文本var name=input _ name . value var pass=input _ pass . value var code=input _ check.value//校验输入if(name==' ' | | pass==' ' | | code==' '){ alert('请输入');} else { //校验通过开始进行登录操作超级绅士发布(网址。loginUrl ).设置(“Cookie”，codeCookie).set(browserMsg) //避免登录后的302重定向。重定向(0)。发送({ ' loginFOrm[username]' : name }).发送({ ' loginFOrm[password]' : pass }).发送({ logincode: code }).发送({ jz: '0' }).end((err，res)={ //登录成功获取tokenCookie //获取令牌cookie令牌cookie=RES . header[' set-cookie ']；超级绅士获取(网址。TargetURl).设置(“Cookie”，令牌饼干).set(browserMsg).end((err，res)={ //成功进入后台控制台。日志；}) });}});BTN刷新。addeventlistener(' click '，(e)={ })；ipcRenderer.on('codeCookie '，(e，msg)={ CodeCookie=msg；console.log('接受主进程发送的codeCookie : ' codeCookie)；});这里只是演示一下代码怎么写，具体不一定那么顺利的拿到令牌饼干。具体情况具体分析。

关键是请求要带上甜饼干

数据抓取

成功进入到后台了，就要抓取需要的数据了。这里就需要再见工具了

再见，https://cheerio.js.org/可以理解是结节上jq，操作基本跟日本季刊日本季刊是一样的。

操作还是很简单的。

要注意的是开发是异步的，就连为也是异步的。

有时候要等待请求完成的话，就要用上异步非同步(异步)了。

导出文件格式表格

爬虫基本完成了，怎么导出数据就随意了。

如果是要生成电子表格文档表格，一般是用excel-导出简单够用

我这里推荐另一个更好-xlsx。

这里演示一下，怎么调用系统的保存对话框，保存文件。

编辑index.js

const remote=electron . remote Btn _ refresh。addeventlistener(' click '，(e)={ const文件路径=remote。对话。showsavedialog(远程。getcurrentwindow()，{ //过滤文件类型过滤器：[{ name : ' xls Files '，扩展名s: ['xlsx'] }，{ name: 'All Files '，扩展名s :[' *]})；console.log(文件路径);});运行一下，点击刷新验证码按钮就可以看到熟悉的系统对话框

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。