嗯，一年一度的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="images/loveyou.gif" />
<img src="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()*600
let y=Math.random()*400
disagree.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
