还搬砖呢？快去表白！没准备好！！OMG，看我看我看我~

嗯，一年一度的520又来了，看看自己是不是单身汪，快点找妹纸表白呀！！就用我们程序员的专有表达方式。

从0-Electron开始告白

网页告白方式似乎已经没落，如果能有桌面端应用就极好了。可是咱也不会呀，只会html，可妹纸还是要，怎么办？？
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

配置开发环境

为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm即可。
       首先，安装最新版本的Node.js 。我们推荐您安装最新的长期支持版本或者当前发行版本。访问Node.js下载页面，选择Windows Installer。下载完成后，执行安装程序，根据引导完成安装即可。
       在安装过程中的配置界面, 请勾选Node.js runtime、npm package manager和Add to PATH这三个选项。
       安装完成后，我们需要来确认Node.js是不是可以正常工作。点击开始按钮，输入PowerShell，找到Windows PowerShell。打开PowerShell或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：

       由于大家都知道的原因使用npm install XX安装包的时候十分慢，不过我们可以更换为淘宝源：

npm config set registry https://registry.npm.taobao.org// 检测更换是否成功
PS C:\Users\CatWing> npm config get registry
http://registry.npm.taobao.org/

开发第一个Electron

创建一个空文件夹，执行命令npm init初始化项目（一路回车）。您会发现多了一个package.json的文件。将文件内容修改为：

{"name": "your-app","version": "0.1.0","main": "main.js","scripts": {"start": "electron ."}
}

现在我们可以安装electron了。官网推荐的安装方法是把它作为您 app 中的开发依赖项，这使您可以在不同的 app 中使用不同的 Electron 版本。执行以下命令即可。

npm install --save-dev electron//添加依赖库至项目
npm install

新建main.js的js文件，添加如下内容：

const { app, BrowserWindow } = require('electron')function createWindow () {   // 创建浏览器窗口let win = new BrowserWindow({width: 800,height: 700,resizable:false})//去除菜单栏win.setMenu(null)// 加载index.html文件win.loadFile('index.html')
}app.whenReady().then(createWindow)

添加index.html，内容随意。现在我们就可以启动electron项目了，执行命令npm start。

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="index.css"/></head><body><div class="question"><h2>小姐姐，做我女朋友吧？</h2><div class="operate"><button class="btn" id="agree">好呀</button><button class="btn" id="disagree">不好</button></div></div><div class="main"><img src="data:images/loveyou.gif" /><img src="data:images/boygirl.gif" /></div><script src="index.js"></script></body>
</html>

index.css

body {overflow: hidden;
}.main {width: 640px;position: absolute;right: -20px;text-align: center;
}
.main .g1 {display: block;
}
.main .g2 {display: block;margin-top: -20px;
}
.question {position: absolute;left: 50px;top: 200px;z-index: 10;border: double 6px #999;border-radius: 15px;background-color: #FFDEE6;padding: 20px;height: 100px;
}
.question h2 {color: #666;margin-top: 10px;
}
.question .operate .btn {width: 80px;height: 35px;background-color: #9AE5FF;border: solid 1px #999;cursor: pointer;outline: none;margin-right: 10px;
}
.question .operate .btn:active {background-color: #66D7FF;
}
.question .operate #disagree {position: absolute;
}

index.js

let agree=document.querySelector("#agree")
agree.onclick=function(){alert("小姐姐，晚上下班一起走呗？")
}let disagree=document.querySelector("#disagree")
disagree.onmouseenter=function(){let x=Math.random()*600let y=Math.random()*400disagree.style.left=x+"px"disagree.style.top=y+"px"
}

告白气球版

代码链接：https://pan.baidu.com/s/13eNCC2IwxlCTvuI4YgBt0Q 提取码：n9xj

Electron打包

也许你的小姐姐电脑没有安装基本的Electron运行环境呢！这不是尴尬了。所以我们需要将应用进行打包。

//查看electron版本
electron --version
v9.0.0//安装electron-packager
npm install electron-packager -g//打包成exe程序
electron-packager . app --vin --out application --arch=x64 --electron-version 9.0.0 --overwrite --ignore=node_modules