嗯，一年一度的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
